From 13b2db391a739e3a501d866a3bafbaa8419b5096 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 16:12:21 -0500
Subject: [PATCH 01/68] chore(docs-editor): integrate stub page editor from PR
 #7

Soft-merge of MM-69892 (PR #7, nang2049): the editor slice in
webapp_globals and a stub PageEditor mounted at the page/draft routes,
so the spaces-API wiring can build around the editor and avoid later
conflicts.

Applied as a net diff onto master since PR #7 was cut from the pre-merge
scaffolding branch. Two divergences resolved:
- Dropped PR #7's navigation.ts change: master's merged draft-route fix
  already exposes the isDraft the editor consumes (single
  [DOCS_DRAFT_ROUTE, DOCS_ROUTE] match instead of two useRouteMatch calls).
- webapp_globals: took PR #7's superset React type imports; kept master's
  useBootstrapDocs in docs_root (3-way merged cleanly with the isDraft add).
---
 .../docs_root/docs_main_content.tsx           |  33 ++--
 webapp/src/components/docs_root/docs_root.tsx |   3 +-
 .../page_editor/page_editor.module.scss       |  42 ++++
 .../components/page_editor/page_editor.tsx    |  63 ++++++
 webapp/src/webapp_globals.ts                  | 182 +++++++++++++++++-
 5 files changed, 300 insertions(+), 23 deletions(-)
 create mode 100644 webapp/src/components/page_editor/page_editor.module.scss
 create mode 100644 webapp/src/components/page_editor/page_editor.tsx

diff --git a/webapp/src/components/docs_root/docs_main_content.tsx b/webapp/src/components/docs_root/docs_main_content.tsx
index 067e933..497074b 100644
--- a/webapp/src/components/docs_root/docs_main_content.tsx
+++ b/webapp/src/components/docs_root/docs_main_content.tsx
@@ -6,19 +6,22 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import DocsHome from 'components/docs_home/docs_home';
+import PageEditor from 'components/page_editor/page_editor';
 
 import styles from './docs_main_content.module.scss';
 
 type Props = {
     spaceId?: string;
     pageId?: string;
+    isDraft?: boolean;
     onCreateSpace: () => void;
     onBrowseSpaces: () => void;
 };
 
 // The space view is built later; for now a routed space renders a placeholder
-// that reflects the routed space/page to keep the URL observable.
-const DocsMainContent = ({spaceId, pageId, onCreateSpace, onBrowseSpaces}: Props) => {
+// that reflects the routed space/page. When a page is routed we hand off to
+// PageEditor
+const DocsMainContent = ({spaceId, pageId, isDraft, onCreateSpace, onBrowseSpaces}: Props) => {
     const space = useSpace(spaceId);
 
     if (!space) {
@@ -30,6 +33,16 @@ const DocsMainContent = ({spaceId, pageId, onCreateSpace, onBrowseSpaces}: Props
         );
     }
 
+    if (pageId) {
+        return (
+            <PageEditor
+                spaceId={space.id}
+                pageId={pageId}
+                isDraft={Boolean(isDraft)}
+            />
+        );
+    }
+
     return (
         <div className={styles.root}>
             <div className={styles.empty}>
@@ -39,18 +52,10 @@ const DocsMainContent = ({spaceId, pageId, onCreateSpace, onBrowseSpaces}: Props
                     {space.title}
                 </h2>
                 <p className={styles.subtitle}>
-                    {pageId ? (
-                        <FormattedMessage
-                            id='docs.main.page'
-                            defaultMessage='Page {pageId}'
-                            values={{pageId}}
-                        />
-                    ) : (
-                        <FormattedMessage
-                            id='docs.main.spaceOverview'
-                            defaultMessage='Space overview'
-                        />
-                    )}
+                    <FormattedMessage
+                        id='docs.main.spaceOverview'
+                        defaultMessage='Space overview'
+                    />
                 </p>
             </div>
         </div>
diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index 5b4069d..0d1c9be 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -16,7 +16,7 @@ import styles from './docs_root.module.scss';
 const DocsRoot = () => {
     useBootstrapDocs();
 
-    const {spaceId, pageId} = useDocsNavigation();
+    const {spaceId, pageId, isDraft} = useDocsNavigation();
 
     const [switcherOpen, setSwitcherOpen] = useState(false);
     const openSwitcher = useCallback(() => setSwitcherOpen(true), []);
@@ -44,6 +44,7 @@ const DocsRoot = () => {
                 <DocsMainContent
                     spaceId={spaceId}
                     pageId={pageId}
+                    isDraft={isDraft}
                     onCreateSpace={openCreateSpace}
                     onBrowseSpaces={openSwitcher}
                 />
diff --git a/webapp/src/components/page_editor/page_editor.module.scss b/webapp/src/components/page_editor/page_editor.module.scss
new file mode 100644
index 0000000..7818986
--- /dev/null
+++ b/webapp/src/components/page_editor/page_editor.module.scss
@@ -0,0 +1,42 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px 32px;
+    gap: 16px;
+    overflow: auto;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--center-channel-color);
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.stub {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+    border: 1px dashed rgba(var(--center-channel-color-rgb), 0.24);
+    border-radius: 8px;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    text-align: center;
+}
+
+.empty {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    text-align: center;
+}
diff --git a/webapp/src/components/page_editor/page_editor.tsx b/webapp/src/components/page_editor/page_editor.tsx
new file mode 100644
index 0000000..eeb24e7
--- /dev/null
+++ b/webapp/src/components/page_editor/page_editor.tsx
@@ -0,0 +1,63 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {hostCanUseEditor, hostGetEditor} from 'webapp_globals';
+
+import styles from './page_editor.module.scss';
+
+type Props = {
+    spaceId: string;
+    pageId: string;
+    isDraft: boolean;
+};
+
+// Placeholder mount for the WYSIWYG editor. This ticket only wires the
+// component to the page route and proves the host slice resolves
+const PageEditor = ({spaceId, pageId, isDraft}: Props) => {
+    if (!hostCanUseEditor()) {
+        return (
+            <div className={styles.empty}>
+                <FormattedMessage
+                    id='docs.editor.hostMissing'
+                    defaultMessage='This Mattermost build does not publish the Docs editor. Update the server to edit pages here.'
+                />
+            </div>
+        );
+    }
+
+    const editor = hostGetEditor();
+    const providerCount = editor?.providers ? Object.keys(editor.providers).length : 0;
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.header}>
+                <span>
+                    {isDraft ? (
+                        <FormattedMessage
+                            id='docs.editor.header.draft'
+                            defaultMessage='Draft · {spaceId} / {pageId}'
+                            values={{spaceId, pageId}}
+                        />
+                    ) : (
+                        <FormattedMessage
+                            id='docs.editor.header.published'
+                            defaultMessage='Published · {spaceId} / {pageId}'
+                            values={{spaceId, pageId}}
+                        />
+                    )}
+                </span>
+            </div>
+            <div className={styles.stub}>
+                <FormattedMessage
+                    id='docs.editor.stub.body'
+                    defaultMessage='Editor is available and will mount here. Suggestion providers exposed: {providerCount}.'
+                    values={{providerCount}}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default PageEditor;
diff --git a/webapp/src/webapp_globals.ts b/webapp/src/webapp_globals.ts
index c4970fb..af00657 100644
--- a/webapp/src/webapp_globals.ts
+++ b/webapp/src/webapp_globals.ts
@@ -2,20 +2,28 @@
 // See LICENSE.txt for license information.
 
 import type {History} from 'history';
-import type {ComponentType, ReactNode} from 'react';
+import type {ComponentType, ElementType, ForwardRefExoticComponent, KeyboardEvent, KeyboardEventHandler, ReactNode, ReactNodeArray, RefAttributes, RefObject} from 'react';
+import type {MessageDescriptor} from 'react-intl';
 import type {Action} from 'redux';
 
+import type {Agent} from '@mattermost/types/agents';
+import type {Channel} from '@mattermost/types/channels';
+import type {Group} from '@mattermost/types/groups';
+import type {UserProfile} from '@mattermost/types/users';
+
 // Hand-typed view of the API the host web app attaches to `window` for plugins
 // (core's plugins/export.ts). The host guarantees these at runtime; anything
 // missing degrades to a no-op.
 //
-// TRANSITION-MIGRATION: the modal contract below now lives in core as
-// @mattermost/shared/types/global (WindowShared, PublishedModalUtils,
-// PublishedModalId, PublishedModalProps). Our pinned @mattermost/shared release
-// doesn't export it yet, so it's mirrored here. Replace this slice with those
-// imports once the dependency is bumped to a version that ships types/global —
-// which also lets openModalById/dialogProps be typed per-modal instead of loose.
-// browserHistory has not migrated into WindowShared yet, so it stays here too.
+// TRANSITION-MIGRATION: the modal and editor contracts below now live in core
+// as @mattermost/shared/types/global (WindowShared, PublishedModalUtils,
+// PublishedEditorUtils, PublishedSuggestionProviderConstructors, etc.). Our
+// pinned @mattermost/shared release doesn't export them yet, so they're
+// mirrored here. Replace this slice with those imports once the dependency is
+// bumped to a version that ships types/global — which also lets openModalById
+// be typed per-modal, and the editor components import from their canonical
+// source instead of this local mirror. browserHistory has not migrated into
+// WindowShared yet, so it stays here too.
 
 type PublishedModalId = 'user_settings' | 'invitation' | 'team_settings' | 'team_members' | 'leave_team';
 
@@ -30,9 +38,153 @@ type PublishedModalUtils = {
     canOpenModalId: (modalId: string) => boolean;
 };
 
+export type ActionResult<Data = unknown, Error = unknown> = {
+    data?: Data;
+    error?: Error;
+};
+
+type Loading = {loading: boolean};
+
+type ComponentOrComponents = {
+    component: ElementType;
+} | {
+    components: ElementType[];
+};
+
+export type ProviderResultsGroup<Item = unknown> = {
+    key: string;
+    label?: MessageDescriptor;
+    terms: string[];
+    items: Array<Item | Loading>;
+} & ComponentOrComponents;
+
+export type ProviderResults<Item = unknown> =
+    | {matchedPretext: string; groups: Array<ProviderResultsGroup<Item>>}
+    | ({matchedPretext: string; terms: string[]; items: Array<Item | Loading>} & ComponentOrComponents);
+
+type SuggestionResultsGroup<Item = unknown> = {
+    key: string;
+    label?: MessageDescriptor;
+    terms: string[];
+    items: Array<Item | Loading>;
+    components: ElementType[];
+};
+
+export type SuggestionResults<Item = unknown> =
+    | {matchedPretext: string; groups: Array<SuggestionResultsGroup<Item>>}
+    | {matchedPretext: string; terms: string[]; items: Array<Item | Loading>; components: ElementType[]};
+
+export type WysiwygEditorProps = {
+    value: string;
+    onChange: (markdown: string) => void;
+    onSubmit: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    channelId: string;
+    rootId?: string;
+    disabled?: boolean;
+    id?: string;
+    useCtrlSend?: boolean;
+    sendCodeBlockOnCtrlEnter?: boolean;
+    onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+};
+
+export type SuggestionListProps = {
+    inputRef?: RefObject<HTMLDivElement>;
+    open: boolean;
+    position?: 'top' | 'bottom';
+    renderNoResults?: boolean;
+    onCompleteWord: (term: string, matchedPretext: string, e?: KeyboardEventHandler<HTMLDivElement>) => boolean;
+    preventClose?: () => void;
+    onItemHover: (term: string) => void;
+    pretext: string;
+    cleared: boolean;
+    results: SuggestionResults;
+    selection: string;
+    suggestionBoxAlgn?: {
+        lineHeight?: number;
+        pixelsToMoveX?: number;
+        pixelsToMoveY?: number;
+    };
+};
+
+export type PublishedMarkdownMode = 'bold' | 'italic' | 'link' | 'strike' | 'code' | 'heading' | 'quote' | 'ul' | 'ol';
+
+export type FormattingBarProps = {
+    applyFormatting: (mode: PublishedMarkdownMode) => void;
+    disableControls: boolean;
+    location: string;
+    additionalControls?: ReactNodeArray;
+    aiActionsMenu?: ReactNode;
+
+    // Returns a Tiptap Editor. Left as `unknown` so consumers don't have to
+    // depend on `@tiptap/react` transitively; cast at the call site.
+    getEditor?: () => unknown;
+};
+
+export type PublishedWysiwygEditorHandle = {
+    insertText: (text: string) => void;
+    focus: () => void;
+    blur: () => void;
+    getInputBox: () => HTMLElement | null;
+};
+
+export type PublishedFormattingBarHandle = {
+    openLinkPopover: () => void;
+};
+
+export type SuggestionProviderInstance = {
+    triggerCharacter?: string;
+    handlePretextChanged: (pretext: string, resultsCallback: (results: ProviderResults) => void) => boolean | void;
+};
+
+export type AtMentionProviderOptions = {
+    currentUserId: string;
+    channelId: string;
+    autocompleteUsersInChannel: (prefix: string) => Promise<ActionResult>;
+    useChannelMentions: boolean;
+    autocompleteGroups: Group[] | null;
+    searchAssociatedGroupsForReference: (prefix: string) => Promise<ActionResult<Group[]>>;
+    priorityProfiles: UserProfile[] | undefined;
+    defaultAgent?: Agent;
+};
+
+export type CommandProviderOptions = {
+    teamId: string;
+    channelId: string;
+    rootId?: string;
+};
+
+export type ChannelMentionProviderArgs = [
+    channelSearchFunc: (
+        term: string,
+        success: (channels: Channel[]) => void,
+        error: () => void,
+    ) => Promise<ActionResult>,
+    delayChannelAutocomplete: boolean,
+];
+
+export type PublishedSuggestionProviderConstructors = {
+    AtMention: new (options: AtMentionProviderOptions) => SuggestionProviderInstance;
+    ChannelMention: new (...args: ChannelMentionProviderArgs) => SuggestionProviderInstance;
+    Command: new (options: CommandProviderOptions) => SuggestionProviderInstance;
+    Emoticon: new () => SuggestionProviderInstance;
+};
+
+export type PublishedSuggestionProviderId = keyof PublishedSuggestionProviderConstructors;
+
+export type PublishedEditorUtils = {
+    WysiwygEditor: ForwardRefExoticComponent<WysiwygEditorProps & RefAttributes<PublishedWysiwygEditorHandle>>;
+    SuggestionList: ComponentType<SuggestionListProps>;
+    FormattingBar: ForwardRefExoticComponent<FormattingBarProps & RefAttributes<PublishedFormattingBarHandle>>;
+    providers: PublishedSuggestionProviderConstructors;
+};
+
 type WebappUtils = {
     browserHistory?: History;
     modals?: Partial<PublishedModalUtils>;
+    editor?: Partial<PublishedEditorUtils>;
 };
 
 const webappUtils = (): WebappUtils => (window as unknown as {WebappUtils?: WebappUtils}).WebappUtils ?? {};
@@ -78,3 +230,17 @@ export function hostCanOpenModal(modalId: string): boolean {
 export function hostOpenModalAction(modalId: PublishedModalId, dialogProps?: Record<string, unknown>): Action | undefined {
     return webappUtils().modals?.openModalById?.(modalId, dialogProps);
 }
+
+// Whether the running host publishes the WYSIWYG editor surface. Older hosts
+// (predating MM-69774) don't attach `editor` — callers should fall back to a
+// read-only render or an "update your server" empty state.
+export function hostCanUseEditor(): boolean {
+    return Boolean(webappUtils().editor?.WysiwygEditor);
+}
+
+// The published editor components + suggestion provider constructors, or
+// undefined when the host doesn't expose them. Fields are individually optional
+// so a newer host can add pieces without breaking older plugin bundles.
+export function hostGetEditor(): Partial<PublishedEditorUtils> | undefined {
+    return webappUtils().editor;
+}

From 07d9a50e06bfbdff41401f951f4b9c49fdcb6bba Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 17:09:21 -0500
Subject: [PATCH 02/68] feat(docs): wire spaces and membership to the plugin
 REST API

Replace the mock data source with an API-backed DocsDataSource over the
plugin's /api/v1 routes (server/api.go), following the Playbooks
fetch(url, Client4.getOptions()) idiom. Spaces are created, listed
(team-scoped by backing-channel membership), and left against the real
server; the switcher fans out per team for cross-team results.

- client/rest: doGet/doPost/doDelete + paginated listAll ({items,has_more})
- data: async DocsDataSource + apiDataSource; remove mock fixtures
- store: fetchSpaces/fetchAllSpaces/createSpace/leaveSpace async thunks;
  drop the team_id hashing stand-in (the server scopes lists by team)
- opaque server ids: drop slug-as-id and isSlugAvailable; the slug stays a
  client-only vanity field, format-validated only
- recent: client-side view history (data/recent_spaces) as the seam for a
  later server last_viewed_at proxy; page count omitted for MVP
- leave space: wired to member removal, navigates home when viewing it
- visibility stays client-only, maps to server view_access later (PR #10)

Addresses PR #2 feedback (team_id hashing, slug assumption, leaveSpace
wiring). Targets current master; forward-compatible with PR #10.
---
 webapp/src/client/rest.ts                     | 80 ++++++++++++++++++
 .../create_space_modal.test.tsx               | 32 ++-----
 .../create_space_modal/validation_messages.ts |  3 -
 webapp/src/components/docs_home/docs_home.tsx |  8 +-
 webapp/src/components/docs_root/docs_root.tsx |  3 +
 .../docs_switcher/docs_switcher.tsx           | 10 +++
 .../spaces_sidebar/space_item_menu.tsx        | 26 +++++-
 webapp/src/data/api_data_source.ts            | 26 ++++++
 webapp/src/data/docs_data_source.ts           | 40 +++++----
 webapp/src/data/fixtures.ts                   | 74 -----------------
 webapp/src/data/index.ts                      |  9 +-
 webapp/src/data/mock_data_source.ts           | 50 -----------
 webapp/src/data/recent_spaces.ts              | 61 ++++++++++++++
 webapp/src/hooks/bootstrap.ts                 |  7 +-
 webapp/src/hooks/docs.ts                      | 21 ++++-
 webapp/src/hooks/spaces.ts                    | 55 ++++++++----
 webapp/src/store/actions.ts                   | 83 +++++++++++--------
 webapp/src/store/selectors.test.ts            | 16 +---
 webapp/src/store/selectors.ts                 | 36 +-------
 webapp/src/types/docs.ts                      | 12 ++-
 webapp/src/validation/space_schema.ts         | 19 ++---
 21 files changed, 364 insertions(+), 307 deletions(-)
 create mode 100644 webapp/src/client/rest.ts
 create mode 100644 webapp/src/data/api_data_source.ts
 delete mode 100644 webapp/src/data/fixtures.ts
 delete mode 100644 webapp/src/data/mock_data_source.ts
 create mode 100644 webapp/src/data/recent_spaces.ts

diff --git a/webapp/src/client/rest.ts b/webapp/src/client/rest.ts
new file mode 100644
index 0000000..3d45024
--- /dev/null
+++ b/webapp/src/client/rest.ts
@@ -0,0 +1,80 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import manifest from 'manifest';
+
+import {ClientError} from '@mattermost/client';
+
+import {Client4} from 'mattermost-redux/client';
+
+// Base URL for the Docs plugin REST API. Client4.url is the host-configured
+// site URL (including any subpath), so this resolves correctly on subpath-hosted
+// instances without extra wiring. Deferred to call time because the host sets
+// Client4.url after our bundle loads.
+const apiUrl = (): string => `${Client4.url}/plugins/${manifest.id}/api/v1`;
+
+type FetchOptions = {
+    method: string;
+    body?: string;
+    headers?: Record<string, string>;
+};
+
+// Single fetch idiom shared by every Docs API call. Client4.getOptions injects
+// the session credentials and CSRF header the server expects (it reads the
+// platform-supplied Mattermost-User-Id header), so this never hand-rolls auth.
+// Server errors are JSON `AppError`s ({message, status_code}); non-OK responses
+// are normalized into ClientError from @mattermost/client.
+async function doFetch<T>(url: string, options: FetchOptions): Promise<T> {
+    const response = await fetch(url, Client4.getOptions(options));
+
+    if (response.ok) {
+        // Actions like DELETE return {"status":"OK"}; callers that expect no
+        // payload type this as void and ignore it.
+        const text = await response.text();
+        return (text ? JSON.parse(text) : {}) as T;
+    }
+
+    let message = `Received status code ${response.status}`;
+    try {
+        const data = await response.json();
+        message = data.message || message;
+    } catch {
+        // Non-JSON error body — keep the status-based message.
+    }
+    throw new ClientError(Client4.url, {message, status_code: response.status, url});
+}
+
+export const restGet = <T>(url: string): Promise<T> => doFetch<T>(url, {method: 'GET'});
+
+export const restPost = <T>(url: string, body: unknown): Promise<T> =>
+    doFetch<T>(url, {method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}});
+
+export const restDelete = <T>(url: string): Promise<T> => doFetch<T>(url, {method: 'DELETE'});
+
+type Paginated<T> = {
+    items: T[];
+    page: number;
+    per_page: number;
+    has_more: boolean;
+};
+
+const PER_PAGE = 100;
+const MAX_PAGES = 1000;
+
+// Follows the server's {items, page, per_page, has_more} envelope across pages
+// and returns the flattened list. The page cap is a runaway-loop backstop, not
+// an expected limit.
+export async function listAll<T>(path: (query: string) => string): Promise<T[]> {
+    const out: T[] = [];
+    for (let page = 0; page < MAX_PAGES; page++) {
+        // eslint-disable-next-line no-await-in-loop
+        const res = await restGet<Paginated<T>>(path(`page=${page}&per_page=${PER_PAGE}`));
+        out.push(...res.items);
+        if (!res.has_more) {
+            break;
+        }
+    }
+    return out;
+}
+
+export {apiUrl};
diff --git a/webapp/src/components/create_space_modal/create_space_modal.test.tsx b/webapp/src/components/create_space_modal/create_space_modal.test.tsx
index b2b7231..c1d0359 100644
--- a/webapp/src/components/create_space_modal/create_space_modal.test.tsx
+++ b/webapp/src/components/create_space_modal/create_space_modal.test.tsx
@@ -13,25 +13,17 @@ import {renderWithContext} from '../../../tests/react_testing_utils';
 
 const team = makeTeam('team1', 'myteam');
 
-const takenSpaceState = {
-    docs: {
-        spaces: {taken: makeSpace('taken', 'Taken', 'team1')},
-        spacesInTeam: {team1: new Set(['taken'])},
-        pages: {},
-        pagesInSpace: {},
-    },
-    currentTeam: team,
-};
-
 function typeName(value: string) {
     fireEvent.change(screen.getByLabelText('Space name'), {target: {value}});
 }
 
 describe('CreateSpaceModal', () => {
-    // Isolate the create path from the mock data source's module-level fixture
-    // store so the "valid submit" test doesn't mutate shared state.
+    // Stub the API create so the form path doesn't hit the network; the server
+    // assigns the opaque id, so the returned space's id is unrelated to the slug.
     beforeEach(() => {
-        jest.spyOn(docsDataSource, 'createSpace').mockImplementation((input) => makeSpace(input.slug, input.title.trim()));
+        jest.spyOn(docsDataSource, 'createSpace').mockImplementation(
+            async (_teamId, input) => makeSpace('new-space-id', input.title.trim(), 'team1'),
+        );
     });
 
     afterEach(() => {
@@ -49,20 +41,6 @@ describe('CreateSpaceModal', () => {
         expect(screen.getByRole('button', {name: 'Create'})).toBeEnabled();
     });
 
-    it('focuses the URL field and shows the error when the slug is already taken', async () => {
-        renderWithContext(<CreateSpaceModal onClose={jest.fn()}/>, {state: takenSpaceState});
-
-        // Typing the name auto-derives the slug ("Taken" -> "taken"), which
-        // collides with the existing space.
-        typeName('Taken');
-        fireEvent.click(screen.getByRole('button', {name: 'Create'}));
-
-        const urlInput = await screen.findByLabelText('Space URL');
-
-        await waitFor(() => expect(urlInput).toHaveFocus());
-        expect(screen.getByText('That URL is already taken')).toBeInTheDocument();
-    });
-
     it('creates the space and closes on a valid submit', async () => {
         const onClose = jest.fn();
         const onCreated = jest.fn();
diff --git a/webapp/src/components/create_space_modal/validation_messages.ts b/webapp/src/components/create_space_modal/validation_messages.ts
index 2338938..888fa92 100644
--- a/webapp/src/components/create_space_modal/validation_messages.ts
+++ b/webapp/src/components/create_space_modal/validation_messages.ts
@@ -13,7 +13,6 @@ const messages = defineMessages({
     urlRequired: {id: 'docs.createSpace.error.url.required', defaultMessage: 'Please enter a URL for the space'},
     urlTooLong: {id: 'docs.createSpace.error.url.tooLong', defaultMessage: 'URL must be {max} characters or fewer'},
     urlInvalid: {id: 'docs.createSpace.error.url.invalid', defaultMessage: 'Use lowercase letters, numbers, and dashes, with no spaces'},
-    urlTaken: {id: 'docs.createSpace.error.url.taken', defaultMessage: 'That URL is already taken'},
     descriptionTooLong: {id: 'docs.createSpace.error.description.tooLong', defaultMessage: 'Description must be {max} characters or fewer'},
 });
 
@@ -32,8 +31,6 @@ export function resolveSpaceValidationError(id: string, formatMessage: FormatMes
         return formatMessage(messages.urlTooLong, {max: SPACE_SLUG_MAX_LENGTH});
     case SpaceValidationError.UrlInvalid:
         return formatMessage(messages.urlInvalid);
-    case SpaceValidationError.UrlTaken:
-        return formatMessage(messages.urlTaken);
     case SpaceValidationError.DescriptionTooLong:
         return formatMessage(messages.descriptionTooLong, {max: SPACE_DESCRIPTION_MAX_LENGTH});
     default:
diff --git a/webapp/src/components/docs_home/docs_home.tsx b/webapp/src/components/docs_home/docs_home.tsx
index 1226e62..88ac443 100644
--- a/webapp/src/components/docs_home/docs_home.tsx
+++ b/webapp/src/components/docs_home/docs_home.tsx
@@ -156,7 +156,7 @@ const SpaceCard = ({summary, onOpen}: {summary: SpaceSummary; onOpen: (id: strin
     const {formatMessage} = useIntl();
     const {space, pageCount, lastViewedAt} = summary;
 
-    const pages = formatMessage(
+    const pages = pageCount === undefined ? null : formatMessage(
         {id: 'docs.home.space.pageCount', defaultMessage: '{count, plural, one {# page} other {# pages}}'},
         {count: pageCount},
     );
@@ -192,8 +192,10 @@ const SpaceCard = ({summary, onOpen}: {summary: SpaceSummary; onOpen: (id: strin
                         <>
                             {pages}
 
-                            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- decorative separator between metadata segments */}
-                            {' · '}
+                            {pages ? (
+                                // eslint-disable-next-line formatjs/no-literal-string-in-jsx -- decorative separator between metadata segments
+                                <>{' · '}</>
+                            ) : null}
                             <FormattedMessage
                                 id='docs.home.space.viewed'
                                 defaultMessage='Viewed {relative}'
diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index 0d1c9be..d1922ff 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -3,6 +3,7 @@
 
 import {useBootstrapDocs} from 'hooks/bootstrap';
 import {useDocsNavigation} from 'hooks/navigation';
+import {useRecordSpaceView} from 'hooks/spaces';
 import React, {useCallback, useState} from 'react';
 import {useHotkeys} from 'react-hotkeys-hook';
 
@@ -18,6 +19,8 @@ const DocsRoot = () => {
 
     const {spaceId, pageId, isDraft} = useDocsNavigation();
 
+    useRecordSpaceView(spaceId);
+
     const [switcherOpen, setSwitcherOpen] = useState(false);
     const openSwitcher = useCallback(() => setSwitcherOpen(true), []);
     const closeSwitcher = useCallback(() => setSwitcherOpen(false), []);
diff --git a/webapp/src/components/docs_switcher/docs_switcher.tsx b/webapp/src/components/docs_switcher/docs_switcher.tsx
index db02793..adc17d7 100644
--- a/webapp/src/components/docs_switcher/docs_switcher.tsx
+++ b/webapp/src/components/docs_switcher/docs_switcher.tsx
@@ -4,6 +4,7 @@
 import classNames from 'classnames';
 import {useDocsSearch, useRecentDocs} from 'hooks/docs';
 import {useDocsNavigation} from 'hooks/navigation';
+import {useAppDispatch} from 'hooks/redux';
 import {useAllSpaces} from 'hooks/spaces';
 import {useTeamNamesById} from 'hooks/team';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -12,6 +13,8 @@ import {useIntl} from 'react-intl';
 import MagnifyIcon from '@mattermost/compass-icons/components/magnify';
 import TextBoxOutlineIcon from '@mattermost/compass-icons/components/text-box-outline';
 
+import {fetchAllSpaces} from 'store/actions';
+
 import GenericModal from 'components/generic_modal/generic_modal';
 
 import type {Page, Space} from 'types/docs';
@@ -33,8 +36,15 @@ const optionId = (index: number) => `docs-switcher-option-${index}`;
 
 const DocsSwitcher = ({onClose}: Props) => {
     const {formatMessage} = useIntl();
+    const dispatch = useAppDispatch();
     const {navigate, navigateInTeam} = useDocsNavigation();
     const [query, setQuery] = useState('');
+
+    // The sidebar only loads the current team; the switcher is cross-team, so
+    // pull every team's spaces when it opens.
+    useEffect(() => {
+        dispatch(fetchAllSpaces());
+    }, [dispatch]);
     const [activeIndex, setActiveIndex] = useState(0);
     const inputRef = useRef<HTMLInputElement>(null);
     const trimmed = query.trim().toLowerCase();
diff --git a/webapp/src/components/spaces_sidebar/space_item_menu.tsx b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
index 4d5c9a5..c419046 100644
--- a/webapp/src/components/spaces_sidebar/space_item_menu.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
@@ -2,7 +2,8 @@
 // See LICENSE.txt for license information.
 
 import {useDocsNavigation} from 'hooks/navigation';
-import React, {useState} from 'react';
+import {useAppDispatch} from 'hooks/redux';
+import React, {useCallback, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {copyToClipboard} from 'utils/clipboard';
 
@@ -10,6 +11,8 @@ import DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical
 import ExitToAppIcon from '@mattermost/compass-icons/components/exit-to-app';
 import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
 
+import {leaveSpace} from 'store/actions';
+
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
 import Menu from 'components/menu/menu';
 import type {MenuItemSpec} from 'components/menu/menu_types';
@@ -24,12 +27,29 @@ type Props = {
 
 const SpaceItemMenu = ({space}: Props) => {
     const {formatMessage} = useIntl();
-    const {paths} = useDocsNavigation();
+    const dispatch = useAppDispatch();
+    const {paths, spaceId, goHome} = useDocsNavigation();
 
     const [confirmLeaveOpen, setConfirmLeaveOpen] = useState(false);
 
     const copyLink = () => copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
 
+    // Leaving removes the current user's membership. Navigate home only if we
+    // just left the space being viewed, and only after the server confirms
+    // (a last-authorized-member removal is rejected with 409).
+    const confirmLeave = useCallback(async () => {
+        try {
+            await dispatch(leaveSpace(space.id));
+            if (spaceId === space.id) {
+                goHome();
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to leave space', error);
+        }
+        setConfirmLeaveOpen(false);
+    }, [dispatch, space.id, spaceId, goHome]);
+
     const items: MenuItemSpec[] = [
 
         // Favorite space is deferred until ordering/favorites persist to user
@@ -116,7 +136,7 @@ const SpaceItemMenu = ({space}: Props) => {
                         />
                     )}
                     isConfirmDestructive={true}
-                    onConfirm={() => setConfirmLeaveOpen(false)}
+                    onConfirm={confirmLeave}
                     onCancel={() => setConfirmLeaveOpen(false)}
                 >
                     <FormattedMessage
diff --git a/webapp/src/data/api_data_source.ts b/webapp/src/data/api_data_source.ts
new file mode 100644
index 0000000..8eda041
--- /dev/null
+++ b/webapp/src/data/api_data_source.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {apiUrl, listAll, restDelete, restGet, restPost} from 'client/rest';
+
+import type {CreateSpaceInput, Page, Space} from 'types/docs';
+
+import type {DocsDataSource} from './docs_data_source';
+
+// Docs data over the plugin REST API (server/api.go). Ids are opaque; lists are
+// paginated ({items, has_more}) and followed to completion by listAll.
+export const apiDataSource: DocsDataSource = {
+    listSpaces: (teamId) => listAll<Space>((query) => `${apiUrl()}/teams/${teamId}/spaces?${query}`),
+
+    getSpace: (spaceId) => restGet<Space>(`${apiUrl()}/spaces/${spaceId}`),
+
+    createSpace: (teamId, input: CreateSpaceInput) => restPost<Space>(`${apiUrl()}/teams/${teamId}/spaces`, {
+        title: input.title.trim(),
+        description: input.description?.trim() || undefined,
+        icon: input.icon || undefined,
+    }),
+
+    removeSpaceMember: (spaceId, userId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}/members/${userId}`),
+
+    listPages: (spaceId) => listAll<Page>((query) => `${apiUrl()}/spaces/${spaceId}/pages?${query}`),
+};
diff --git a/webapp/src/data/docs_data_source.ts b/webapp/src/data/docs_data_source.ts
index 57e1d3d..a1e9329 100644
--- a/webapp/src/data/docs_data_source.ts
+++ b/webapp/src/data/docs_data_source.ts
@@ -3,24 +3,32 @@
 
 import type {CreateSpaceInput, Page, Space} from 'types/docs';
 
-// The seam between the store's thunks and where Docs data actually comes from.
-// The mock source implements this today; an API-backed source (over the
-// Mattermost client + plugin REST) replaces it once the server contract
-// exists. Methods are synchronous for the mock source and will become
-// Promise-based with the real source.
+// The seam between the store's thunks and the Docs server REST API. The
+// API-backed source implements this over the plugin's /api/v1 routes; the
+// interface stays transport-agnostic so tests can substitute a fake.
+//
+// All methods are async: they map to network calls. Ids are the platform's
+// opaque 26-char ids (no slugs) and space reads/lists are team-scoped, matching
+// the server contract.
 export interface DocsDataSource {
-    listSpaces(): Space[];
-    getSpace(id: string): Space | undefined;
 
-    // Pages belong to a space, so listing them is always scoped to one.
-    listPages(spaceId: string): Page[];
+    // Spaces the caller is a member of in the given team (the server filters by
+    // backing-channel membership).
+    listSpaces(teamId: string): Promise<Space[]>;
 
-    // Creates a space and returns it. Synchronous for the mock source; becomes
-    // Promise-based (and may reject) once a real backend exists, which is why
-    // the createSpace thunk treats submission as async.
-    createSpace(input: CreateSpaceInput): Space;
+    getSpace(spaceId: string): Promise<Space | undefined>;
 
-    // Whether a custom slug is free to use. The mock source checks its
-    // in-memory spaces; the real source checks the server.
-    isSlugAvailable(slug: string): boolean;
+    // Creates a space in the team and returns it (with its server-assigned id
+    // and team_id). Only server-supported fields are sent; client-only fields
+    // (slug, visibility) are dropped by the API source until the server models
+    // them (see PR #10's view_access).
+    createSpace(teamId: string, input: CreateSpaceInput): Promise<Space>;
+
+    // Removes a member from a space. Leaving a space is removing yourself; the
+    // server rejects removing the last authorized member (409).
+    removeSpaceMember(spaceId: string, userId: string): Promise<void>;
+
+    // Pages belong to a space. No page-consuming UI exists yet, so this is
+    // wired for later; the server returns page summaries (no body).
+    listPages(spaceId: string): Promise<Page[]>;
 }
diff --git a/webapp/src/data/fixtures.ts b/webapp/src/data/fixtures.ts
deleted file mode 100644
index dd6dc1c..0000000
--- a/webapp/src/data/fixtures.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import type {Page, Space} from 'types/docs';
-
-// Design-time fixtures behind the mock data source. The real Docs API replaces
-// these once the server contract exists; only the mock source and the store's
-// recent-docs selectors read them directly.
-
-function space(id: string, title: string, icon: string): Space {
-    return {
-        id,
-        team_id: '',
-        creator_id: '',
-        title,
-        icon,
-        props: {},
-        create_at: 0,
-        update_at: 0,
-        delete_at: 0,
-        sort_order: 0,
-    };
-}
-
-function page(id: string, title: string, spaceId: string): Page {
-    return {
-        id,
-        space_id: spaceId,
-        parent_id: '',
-        type: 'page',
-        title,
-        body: '',
-        sort_order: 0,
-        create_at: 0,
-        update_at: 0,
-        edit_at: 0,
-        delete_at: 0,
-    };
-}
-
-export const spaces: Space[] = [
-    space('project-avalanche', 'Project Avalanche', '✈️'),
-    space('contributor-wiki', 'Contributor Wiki', '👨🏻‍💻'),
-    space('developers', 'Developers', '⌨️'),
-    space('release-discussion', 'Release Discussion', '🚀'),
-    space('incident-handbook', 'Incident Handbook', '📕'),
-    space('security-incident-handbook', 'Security Incident Handbook', '🛡️'),
-    space('product-support', 'Product Support', '🖐️'),
-];
-
-export const pages: Page[] = [
-    page('operational-procedures', 'Operational Procedures', 'project-avalanche'),
-    page('overview-flight-comms', 'Overview of Flight Communication Protocols', 'project-avalanche'),
-    page('communication-protocols', 'Communication Protocols', 'project-avalanche'),
-];
-
-export const recentSpaceIds = ['project-avalanche'];
-export const recentPageIds = ['operational-procedures', 'overview-flight-comms', 'communication-protocols'];
-
-// Recently-viewed-spaces summaries for the Home listing (page counts and
-// last-viewed timestamps are mocked until the server provides them; the client
-// formats the timestamp into a relative label at render).
-const MINUTE = 60 * 1000;
-const DAY = 24 * 60 * MINUTE;
-const now = Date.now();
-
-export const recentSpaceSummaries: Array<{spaceId: string; pageCount: number; lastViewedAt: number}> = [
-    {spaceId: 'project-avalanche', pageCount: 12, lastViewedAt: now - (12 * MINUTE)},
-    {spaceId: 'incident-handbook', pageCount: 25, lastViewedAt: now - (18 * MINUTE)},
-    {spaceId: 'contributor-wiki', pageCount: 48, lastViewedAt: now - (18 * MINUTE)},
-    {spaceId: 'product-support', pageCount: 4, lastViewedAt: now - (2 * DAY)},
-    {spaceId: 'release-discussion', pageCount: 5, lastViewedAt: now - (2 * DAY)},
-    {spaceId: 'security-incident-handbook', pageCount: 5, lastViewedAt: now - (2 * DAY)},
-];
diff --git a/webapp/src/data/index.ts b/webapp/src/data/index.ts
index 49ffae9..c2bfa4c 100644
--- a/webapp/src/data/index.ts
+++ b/webapp/src/data/index.ts
@@ -1,12 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {apiDataSource} from './api_data_source';
 import type {DocsDataSource} from './docs_data_source';
-import {mockDataSource} from './mock_data_source';
 
-// The single active data source. Swapped for the API-backed source once the
-// Docs server contract exists; hooks depend only on this, never on the source
-// implementation, so the swap touches no UI.
-export const docsDataSource: DocsDataSource = mockDataSource;
+// The single active data source: the Docs plugin REST API. Thunks depend only
+// on this, never on the transport, so a fake can be substituted in tests.
+export const docsDataSource: DocsDataSource = apiDataSource;
 
 export type {DocsDataSource} from './docs_data_source';
diff --git a/webapp/src/data/mock_data_source.ts b/webapp/src/data/mock_data_source.ts
deleted file mode 100644
index 8c38035..0000000
--- a/webapp/src/data/mock_data_source.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import type {Space} from 'types/docs';
-
-import type {DocsDataSource} from './docs_data_source';
-import {pages, spaces} from './fixtures';
-
-const spacesById = new Map<string, Space>(spaces.map((s) => [s.id, s]));
-
-// Default icon for a newly created space until an icon/emoji picker (imported
-// from the web app) exists.
-const DEFAULT_SPACE_ICON = '📄';
-
-export const mockDataSource: DocsDataSource = {
-    listSpaces: () => spaces,
-    getSpace: (id) => spacesById.get(id),
-    listPages: (spaceId) => pages.filter((page) => page.space_id === spaceId),
-    createSpace: (input): Space => {
-        const now = Date.now();
-
-        // The slug is the space's URL identifier, so it doubles as the id in the
-        // mock (fixture ids are slugs too). isSlugAvailable guarantees it's free.
-        const space: Space = {
-            id: input.slug,
-            team_id: '',
-            creator_id: '',
-            title: input.title.trim(),
-            icon: input.icon || DEFAULT_SPACE_ICON,
-            description: input.description?.trim() || undefined,
-            visibility: input.visibility,
-            props: {},
-            create_at: now,
-            update_at: now,
-            delete_at: 0,
-            sort_order: 0,
-        };
-
-        // Prepend so the new space shows at the top of the Spaces list, the way
-        // the real source would reflect a freshly created entity.
-        spaces.unshift(space);
-        spacesById.set(space.id, space);
-        return space;
-    },
-
-    // A slug is free when no existing space claims it. Mock spaces are keyed by
-    // their slug (see createSpace + fixtures), so the id map is the source of
-    // truth the real backend check stands in for.
-    isSlugAvailable: (slug) => !spacesById.has(slug),
-};
diff --git a/webapp/src/data/recent_spaces.ts b/webapp/src/data/recent_spaces.ts
new file mode 100644
index 0000000..bf77a9d
--- /dev/null
+++ b/webapp/src/data/recent_spaces.ts
@@ -0,0 +1,61 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// Client-side "recently viewed spaces" store. There is no server view-history
+// API yet; space visibility is already driven by backing-channel membership, so
+// the eventual source is that channel's ChannelMember.LastViewedAt surfaced by
+// the server. Callers use recordSpaceView / getSpaceViews as the seam, so that
+// swap won't touch them.
+
+export type SpaceView = {
+    spaceId: string;
+    lastViewedAt: number;
+};
+
+const KEY_PREFIX = 'docs_recent_spaces_';
+const MAX_TRACKED = 50;
+
+// Per-user so multiple accounts on one browser don't share a history.
+const storageKey = (userId: string): string => `${KEY_PREFIX}${userId}`;
+
+const read = (userId: string): Record<string, number> => {
+    try {
+        const raw = window.localStorage.getItem(storageKey(userId));
+        return raw ? JSON.parse(raw) as Record<string, number> : {};
+    } catch {
+        // Storage unavailable (private mode / quota) or corrupt — treat as empty.
+        return {};
+    }
+};
+
+const write = (userId: string, map: Record<string, number>): void => {
+    try {
+        window.localStorage.setItem(storageKey(userId), JSON.stringify(map));
+    } catch {
+        // Best-effort; recency is non-critical, so a write failure is ignored.
+    }
+};
+
+export function recordSpaceView(userId: string, spaceId: string, at: number): void {
+    if (!userId || !spaceId) {
+        return;
+    }
+    const map = read(userId);
+    map[spaceId] = at;
+
+    // Cap the history: drop the oldest entries beyond MAX_TRACKED.
+    const entries = Object.entries(map);
+    if (entries.length > MAX_TRACKED) {
+        entries.sort((a, b) => b[1] - a[1]);
+        write(userId, Object.fromEntries(entries.slice(0, MAX_TRACKED)));
+        return;
+    }
+    write(userId, map);
+}
+
+// Most-recently-viewed first.
+export function getSpaceViews(userId: string): SpaceView[] {
+    return Object.entries(read(userId)).
+        map(([spaceId, lastViewedAt]) => ({spaceId, lastViewedAt})).
+        sort((a, b) => b.lastViewedAt - a.lastViewedAt);
+}
diff --git a/webapp/src/hooks/bootstrap.ts b/webapp/src/hooks/bootstrap.ts
index e2fff60..d5698c7 100644
--- a/webapp/src/hooks/bootstrap.ts
+++ b/webapp/src/hooks/bootstrap.ts
@@ -4,16 +4,15 @@
 import {useAppDispatch} from 'hooks/redux';
 import {useEffect} from 'react';
 
-import {fetchPages, fetchSpaces} from 'store/actions';
+import {fetchSpaces} from 'store/actions';
 
 // Loads the Docs data layer once the product mounts (i.e. an authenticated user
-// has navigated into Docs), rather than at plugin init. Later this becomes a
-// team-scoped fetch against the real API.
+// has navigated into Docs), rather than at plugin init. Team-scoped: the server
+// returns the current team's spaces the caller belongs to.
 export function useBootstrapDocs(): void {
     const dispatch = useAppDispatch();
 
     useEffect(() => {
         dispatch(fetchSpaces());
-        dispatch(fetchPages());
     }, [dispatch]);
 }
diff --git a/webapp/src/hooks/docs.ts b/webapp/src/hooks/docs.ts
index 8829edd..c107eb8 100644
--- a/webapp/src/hooks/docs.ts
+++ b/webapp/src/hooks/docs.ts
@@ -1,18 +1,31 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {getSpaceViews} from 'data/recent_spaces';
 import {useAppSelector} from 'hooks/redux';
 import {useMemo} from 'react';
 
-import {getRecentPages, getRecentSpaces, searchDocs} from 'store/selectors';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+
+import {getSpacesById, searchDocs} from 'store/selectors';
 import type {DocsSearchResults} from 'store/selectors';
 
 import type {Page, Space} from 'types/docs';
 
+const EMPTY_PAGES: Page[] = [];
+
+// Recently-viewed docs for the switcher. Cross-team recent spaces resolved from
+// the client-side recency store; recent pages await the page tree (Pages later).
 export function useRecentDocs(): {spaces: Space[]; pages: Page[]} {
-    const spaces = useAppSelector(getRecentSpaces);
-    const pages = useAppSelector(getRecentPages);
-    return useMemo(() => ({spaces, pages}), [spaces, pages]);
+    const userId = useAppSelector(getCurrentUserId);
+    const spacesById = useAppSelector(getSpacesById);
+    return useMemo(() => {
+        const spaces = getSpaceViews(userId).flatMap(({spaceId}) => {
+            const space = spacesById[spaceId];
+            return space ? [space] : [];
+        });
+        return {spaces, pages: EMPTY_PAGES};
+    }, [userId, spacesById]);
 }
 
 // Filtering lives in the store selector, not the UI; later this can debounce
diff --git a/webapp/src/hooks/spaces.ts b/webapp/src/hooks/spaces.ts
index 24f91ec..d123ea3 100644
--- a/webapp/src/hooks/spaces.ts
+++ b/webapp/src/hooks/spaces.ts
@@ -2,14 +2,17 @@
 // See LICENSE.txt for license information.
 
 import {useForm} from '@tanstack/react-form';
-import {useAppDispatch, useAppSelector, useAppStore} from 'hooks/redux';
+import {getSpaceViews, recordSpaceView} from 'data/recent_spaces';
+import {useAppDispatch, useAppSelector} from 'hooks/redux';
 import {useTeamContext} from 'hooks/team';
-import {useCallback, useMemo, useRef} from 'react';
+import {useCallback, useEffect, useMemo, useRef} from 'react';
 import {DOCS_KEYWORD} from 'routing/paths';
 import {createSpaceFormSchema, slugify} from 'validation/space_schema';
 
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+
 import {createSpace} from 'store/actions';
-import {getAllSpaces, getRecentSpaceSummaries, getSpace, getSpacesForCurrentTeam, isSlugAvailable} from 'store/selectors';
+import {getAllSpaces, getSpace, getSpacesForCurrentTeam} from 'store/selectors';
 
 import type {UrlInputHandle} from 'components/form-controls/url_input';
 
@@ -28,8 +31,31 @@ export function useSpace(id?: string): Space | undefined {
     return useAppSelector((state) => (id ? getSpace(state, id) : undefined));
 }
 
+// Recently-viewed spaces in the current team (Home). Recency is client-side
+// today (see data/recent_spaces); resolved against the loaded team spaces so a
+// left/deleted space drops out. pageCount is omitted until the server provides
+// one.
 export function useRecentSpaceSummaries(): SpaceSummary[] {
-    return useAppSelector(getRecentSpaceSummaries);
+    const userId = useAppSelector(getCurrentUserId);
+    const teamSpaces = useAppSelector(getSpacesForCurrentTeam);
+    return useMemo(() => {
+        const byId = new Map(teamSpaces.map((space) => [space.id, space]));
+        return getSpaceViews(userId).flatMap(({spaceId, lastViewedAt}) => {
+            const space = byId.get(spaceId);
+            return space ? [{space, lastViewedAt}] : [];
+        });
+    }, [userId, teamSpaces]);
+}
+
+// Records that the current user viewed a space, feeding the recently-viewed
+// list. No-op until both ids are known.
+export function useRecordSpaceView(spaceId?: string): void {
+    const userId = useAppSelector(getCurrentUserId);
+    useEffect(() => {
+        if (userId && spaceId) {
+            recordSpaceView(userId, spaceId, Date.now());
+        }
+    }, [userId, spaceId]);
 }
 
 type CreateSpaceValues = {
@@ -50,19 +76,16 @@ type CreateSpaceOptions = {
     onCreated?: (space: Space) => void;
 };
 
-// Owns the create-space form via TanStack Form. The existing Zod schemas drive
-// validation through TanStack's validators — the whole-form schema on submit
-// (its issues distribute to fields by path) and the slug's async format +
-// uniqueness schema on blur. The uniqueness check reads current store state
-// (a Zod refine isn't a React hook, so it reads the store snapshot rather than
-// subscribing) so a space created earlier in the same session is accounted for.
+// Owns the create-space form via TanStack Form. The Zod schema drives validation
+// through TanStack's validators (its issues distribute to fields by path). The
+// slug is a client-only vanity field for now — the server assigns an opaque id
+// and has no slug concept, so there's no uniqueness check; only format is
+// validated (the slug's on-blur schema).
 export function useCreateSpace({onCreated}: CreateSpaceOptions = {}) {
     const {name: teamName} = useTeamContext();
     const dispatch = useAppDispatch();
-    const store = useAppStore();
 
-    const checkSlugAvailable = useCallback((slug: string) => isSlugAvailable(store.getState(), slug), [store]);
-    const formSchema = useMemo(() => createSpaceFormSchema(checkSlugAvailable), [checkSlugAvailable]);
+    const formSchema = useMemo(() => createSpaceFormSchema(), []);
     const slugSchema = useMemo(() => formSchema.shape.slug, [formSchema]);
 
     // Stop deriving the slug from the name once the user edits the slug directly.
@@ -74,12 +97,12 @@ export function useCreateSpace({onCreated}: CreateSpaceOptions = {}) {
         defaultValues: INITIAL_VALUES,
         validators: {onSubmitAsync: formSchema},
         onSubmit: async ({value}) => {
-            const space = await Promise.resolve(dispatch(createSpace({
+            const space = await dispatch(createSpace({
                 title: value.name.trim(),
                 slug: value.slug.trim(),
                 visibility: value.visibility,
                 description: value.description.trim() || undefined,
-            })));
+            }));
             onCreated?.(space);
         },
     });
@@ -96,7 +119,7 @@ export function useCreateSpace({onCreated}: CreateSpaceOptions = {}) {
         form.setFieldValue('slug', slug);
     }, [form]);
 
-    // Submits, then surfaces a rejected slug (e.g. a taken URL) by focusing the
+    // Submits, then surfaces a rejected slug (e.g. a bad format) by focusing the
     // URL input — otherwise the error lands on the field's read-only preview.
     const submit = useCallback(async () => {
         await form.handleSubmit();
diff --git a/webapp/src/store/actions.ts b/webapp/src/store/actions.ts
index 2964f16..bc8b0a3 100644
--- a/webapp/src/store/actions.ts
+++ b/webapp/src/store/actions.ts
@@ -4,60 +4,73 @@
 import {docsDataSource} from 'data';
 
 import {getCurrentTeamId, getMyTeams} from 'mattermost-redux/selectors/entities/teams';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import type {CreateSpaceInput, Space} from 'types/docs';
 import type {DocsThunkAction} from 'types/store';
 
 import {PageTypes, SpaceTypes} from './action_types';
 
-// Stable per-id hash so a space always lands in the same team across refetches
-// (a plain random would make spaces hop teams on every fetch).
-const hashString = (value: string): number => {
-    let hash = 0;
-    for (let i = 0; i < value.length; i++) {
-        hash = ((hash * 31) + value.charCodeAt(i)) | 0;
-    }
-    return Math.abs(hash);
-};
-
-// The mock fixtures aren't team-aware. Spread them across the user's teams
-// (deterministically by space id) so team-scoped reads visibly differ per team;
-// falls back to the current team when membership isn't loaded. The real API will
-// return spaces already scoped to their team, at which point this goes away.
-export function fetchSpaces(): DocsThunkAction<void> {
-    return (dispatch, getState) => {
-        const state = getState();
-        const teamIds = getMyTeams(state).map((team) => team.id);
-        const fallbackTeamId = getCurrentTeamId(state);
-        const spaces = docsDataSource.listSpaces().map((space) => ({
-            ...space,
-            team_id: teamIds.length ? teamIds[hashString(space.id) % teamIds.length] : fallbackTeamId,
-        }));
-        dispatch({type: SpaceTypes.RECEIVED_SPACES, spaces});
+// Spaces the caller belongs to in the current team (the server scopes the list
+// by backing-channel membership). A failed load leaves the store empty rather
+// than crashing the product on mount.
+export function fetchSpaces(): DocsThunkAction<Promise<void>> {
+    return async (dispatch, getState) => {
+        const teamId = getCurrentTeamId(getState());
+        if (!teamId) {
+            return;
+        }
+        try {
+            const spaces = await docsDataSource.listSpaces(teamId);
+            dispatch({type: SpaceTypes.RECEIVED_SPACES, spaces});
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to load spaces', error);
+        }
+    };
+}
+
+// Cross-team load for the switcher: fan out over the user's teams. The server
+// has no all-teams endpoint, so this is N team-scoped calls run in parallel.
+export function fetchAllSpaces(): DocsThunkAction<Promise<void>> {
+    return async (dispatch, getState) => {
+        const teams = getMyTeams(getState());
+        try {
+            const perTeam = await Promise.all(teams.map((team) => docsDataSource.listSpaces(team.id)));
+            dispatch({type: SpaceTypes.RECEIVED_SPACES, spaces: perTeam.flat()});
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to load spaces across teams', error);
+        }
     };
 }
 
-// Bootstraps pages for one space, or for every known space when called with no
-// argument — there's no bulk "list all pages" on the data source yet.
-export function fetchPages(spaceId?: string): DocsThunkAction<void> {
-    return (dispatch) => {
-        const spaceIds = spaceId ? [spaceId] : docsDataSource.listSpaces().map((space) => space.id);
-        const pages = spaceIds.flatMap((id) => docsDataSource.listPages(id));
+// Loads a space's pages. Wired for the page tree that lands later; no UI reads
+// store pages yet, so this isn't called on bootstrap.
+export function fetchPages(spaceId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch) => {
+        const pages = await docsDataSource.listPages(spaceId);
         dispatch({type: PageTypes.RECEIVED_PAGES, pages});
     };
 }
 
-export function createSpace(input: CreateSpaceInput): DocsThunkAction<Space> {
-    return (dispatch, getState) => {
+// Creates a space in the current team and returns the server-assigned entity
+// (rejects on failure so the form can surface it).
+export function createSpace(input: CreateSpaceInput): DocsThunkAction<Promise<Space>> {
+    return async (dispatch, getState) => {
         const teamId = getCurrentTeamId(getState());
-        const space = {...docsDataSource.createSpace(input), team_id: teamId};
+        const space = await docsDataSource.createSpace(teamId, input);
         dispatch({type: SpaceTypes.CREATED_SPACE, space});
         return space;
     };
 }
 
-export function leaveSpace(spaceId: string): DocsThunkAction<void> {
-    return (dispatch) => {
+// Leaving a space is removing yourself from its membership. The server rejects
+// removing the last authorized member (409); the caller surfaces that.
+export function leaveSpace(spaceId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch, getState) => {
+        const userId = getCurrentUserId(getState());
+        await docsDataSource.removeSpaceMember(spaceId, userId);
         dispatch({type: SpaceTypes.DELETED_SPACE, spaceId});
     };
 }
diff --git a/webapp/src/store/selectors.test.ts b/webapp/src/store/selectors.test.ts
index 76e6c8a..eb104ed 100644
--- a/webapp/src/store/selectors.test.ts
+++ b/webapp/src/store/selectors.test.ts
@@ -5,7 +5,7 @@ import manifest from 'manifest';
 
 import type {GlobalState} from '@mattermost/types/store';
 
-import {getPagesForSpace, getSpacesInTeam, isSlugAvailable} from './selectors';
+import {getPagesForSpace, getSpacesInTeam} from './selectors';
 import {makePage, makeSpace} from './test_fixtures';
 import type {DocsPluginState} from './types';
 
@@ -29,20 +29,6 @@ describe('getSpacesInTeam', () => {
     });
 });
 
-describe('isSlugAvailable', () => {
-    it('is false when a space already claims the slug', () => {
-        const state = makeState({
-            spaces: {taken: makeSpace('taken', 'Taken')},
-            spacesInTeam: {},
-            pages: {},
-            pagesInSpace: {},
-        });
-
-        expect(isSlugAvailable(state, 'taken')).toBe(false);
-        expect(isSlugAvailable(state, 'free')).toBe(true);
-    });
-});
-
 describe('getPagesForSpace', () => {
     it('resolves page ids for a space, ignoring other spaces', () => {
         const page1 = makePage('p1', 'space-a', 'Page 1');
diff --git a/webapp/src/store/selectors.ts b/webapp/src/store/selectors.ts
index 51326bd..699f3da 100644
--- a/webapp/src/store/selectors.ts
+++ b/webapp/src/store/selectors.ts
@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {recentPageIds, recentSpaceIds, recentSpaceSummaries} from 'data/fixtures';
 import manifest from 'manifest';
 import {createSelector} from 'reselect';
 
@@ -9,7 +8,7 @@ import type {GlobalState} from '@mattermost/types/store';
 
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 
-import type {Page, Space, SpaceSummary} from 'types/docs';
+import type {Page, Space} from 'types/docs';
 
 import type {DocsPluginState} from './types';
 
@@ -85,34 +84,6 @@ const getAllPages = createSelector(
 
 export const getSpace = (state: GlobalState, id: string): Space | undefined => getSpacesById(state)[id];
 
-// A slug doubles as a space id in the mock (see data/mock_data_source.ts), so
-// checking the store's id map is equivalent to checking slug uniqueness.
-export const isSlugAvailable = (state: GlobalState, slug: string): boolean => !getSpacesById(state)[slug];
-
-const EMPTY_SET: Set<string> = new Set();
-
-const getCurrentTeamSpaceIds = createSelector(
-    [getSpacesInTeamIndex, getCurrentTeamId],
-    (index, teamId) => index[teamId] ?? EMPTY_SET,
-);
-
-// "Recent" bookkeeping is design-time fixture data until a real recently-viewed
-// concept (and API) exists; the ids resolve against the reactive store so the
-// result still reflects any local creates/deletes. Cross-team (backs the
-// switcher); the team-scoped Home listing is getRecentSpaceSummaries below.
-export const getRecentSpaces = createSelector(
-    [getSpacesById],
-    (byId) => compact(recentSpaceIds.map((id) => byId[id])),
-);
-
-export const getRecentSpaceSummaries = createSelector(
-    [getSpacesById, getCurrentTeamSpaceIds],
-    (byId, teamSpaceIds): SpaceSummary[] => recentSpaceSummaries.flatMap(({spaceId, pageCount, lastViewedAt}) => {
-        const space = byId[spaceId];
-        return space && teamSpaceIds.has(space.id) ? [{space, pageCount, lastViewedAt}] : [];
-    }),
-);
-
 export const getPagesForSpace = createSelector(
     [getPagesById, getPagesInSpaceIndex, (_state: GlobalState, spaceId: string) => spaceId],
     (byId, index, spaceId) => resolvePages(index[spaceId], byId),
@@ -120,11 +91,6 @@ export const getPagesForSpace = createSelector(
 
 export const getPage = (state: GlobalState, id: string): Page | undefined => getPagesById(state)[id];
 
-export const getRecentPages = createSelector(
-    [getPagesById],
-    (byId) => compact(recentPageIds.map((id) => byId[id])),
-);
-
 export type DocsSearchResults = {
     spaces: Space[];
     pages: Page[];
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index 357614e..a2e0ac8 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -8,8 +8,8 @@ export type SpaceVisibility = 'public' | 'private';
 
 // Field names and shapes mirror the server model (server/model/space.go) —
 // snake_case JSON per @mattermost/types convention. The server model has no
-// `visibility`; it stays a client-only field until channel privacy / props
-// represent it.
+// `visibility` yet; it stays a client-only field and maps to the server's
+// `view_access` (open/private) once that lands (PR #10 / MM-69269).
 export type Space = {
     id: string;
     team_id: string;
@@ -56,10 +56,14 @@ export type Page = {
 
 export type SpaceSummary = {
     space: Space;
-    pageCount: number;
+
+    // Omitted until the server provides a count (listing pages per space just to
+    // count them isn't worth it for MVP).
+    pageCount?: number;
 
     // Epoch ms of the viewer's last visit; the client formats it into a
-    // "Viewed 12m ago"-style label at render (server-provided later).
+    // "Viewed 12m ago"-style label at render. Client-tracked today (see
+    // data/recent_spaces), server-provided later.
     lastViewedAt?: number;
 };
 
diff --git a/webapp/src/validation/space_schema.ts b/webapp/src/validation/space_schema.ts
index fe1c2bd..4972577 100644
--- a/webapp/src/validation/space_schema.ts
+++ b/webapp/src/validation/space_schema.ts
@@ -24,22 +24,16 @@ export const SpaceValidationError = {
     UrlRequired: 'url.required',
     UrlTooLong: 'url.tooLong',
     UrlInvalid: 'url.invalid',
-    UrlTaken: 'url.taken',
     DescriptionTooLong: 'description.tooLong',
 } as const;
 
 export type SpaceValidationError = typeof SpaceValidationError[keyof typeof SpaceValidationError];
 
-// Reports whether a slug is free. Injected so the schema stays decoupled from
-// where availability is checked (the store, today); may be async, since the
-// real check asks the server.
-export type CheckSlugAvailable = (slug: string) => boolean | Promise<boolean>;
-
-// One schema for the whole form. The slug field carries the async uniqueness
-// refine; its format checks abort on failure so a malformed slug never reaches
-// the server. Consumers that validate the slug on its own (the URL field, on
-// blur) derive it with `createSpaceFormSchema(...).shape.slug`.
-export function createSpaceFormSchema(checkSlugAvailable: CheckSlugAvailable) {
+// One schema for the whole form. The slug is a client-only vanity field (the
+// server assigns an opaque id and has no slug concept), so it's only format-
+// validated — no uniqueness check. Consumers that validate the slug on its own
+// (the URL field, on blur) derive it with `createSpaceFormSchema().shape.slug`.
+export function createSpaceFormSchema() {
     return z.object({
         name: z.
             string().
@@ -51,8 +45,7 @@ export function createSpaceFormSchema(checkSlugAvailable: CheckSlugAvailable) {
             trim().
             min(1, {error: SpaceValidationError.UrlRequired, abort: true}).
             max(SPACE_SLUG_MAX_LENGTH, {error: SpaceValidationError.UrlTooLong, abort: true}).
-            regex(SLUG_PATTERN, {error: SpaceValidationError.UrlInvalid, abort: true}).
-            refine(async (slug) => checkSlugAvailable(slug), {error: SpaceValidationError.UrlTaken}),
+            regex(SLUG_PATTERN, {error: SpaceValidationError.UrlInvalid, abort: true}),
         visibility: z.enum(['public', 'private']),
 
         // Required string (may be empty) to match the always-present form field;

From 02323f4f7388f9365ad7c4bcdcb682e2786674e6 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 17:09:22 -0500
Subject: [PATCH 03/68] chore(i18n): re-extract en.json after spaces-API wiring

Adds the docs.editor.* ids from the stub editor and drops the removed
url.taken and page-placeholder ids plus the stale favorites ids.
---
 webapp/i18n/en.json | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 1ab23b7..9c97e02 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -10,7 +10,6 @@
   "docs.createSpace.error.name.tooLong": "Name must be {max} characters or fewer",
   "docs.createSpace.error.url.invalid": "Use lowercase letters, numbers, and dashes, with no spaces",
   "docs.createSpace.error.url.required": "Please enter a URL for the space",
-  "docs.createSpace.error.url.taken": "That URL is already taken",
   "docs.createSpace.error.url.tooLong": "URL must be {max} characters or fewer",
   "docs.createSpace.nameLabel": "Space name",
   "docs.createSpace.permissionsNote": "Specific edit and sharing permissions can be defined once the space is created.",
@@ -22,6 +21,10 @@
   "docs.createSpace.title": "Create a new space",
   "docs.createSpace.urlAriaLabel": "Space URL",
   "docs.createSpace.visibilityLabel": "Space visibility",
+  "docs.editor.header.draft": "Draft · {spaceId} / {pageId}",
+  "docs.editor.header.published": "Published · {spaceId} / {pageId}",
+  "docs.editor.hostMissing": "This Mattermost build does not publish the Docs editor. Update the server to edit pages here.",
+  "docs.editor.stub.body": "Editor is available and will mount here. Suggestion providers exposed: {providerCount}.",
   "docs.form.url.edit": "Edit",
   "docs.form.url.label": "URL:",
   "docs.genericModal.close": "Close",
@@ -53,12 +56,10 @@
   "docs.leaveSpace.confirm": "Yes, leave space",
   "docs.leaveSpace.message": "Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.",
   "docs.leaveSpace.title": "Leave {name}",
-  "docs.main.page": "Page {pageId}",
   "docs.main.spaceOverview": "Space overview",
   "docs.sidebar.add.browse": "Browse spaces",
   "docs.sidebar.add.create": "Create a space",
   "docs.sidebar.add.menu": "Add or browse spaces",
-  "docs.sidebar.category.favorites": "Favorites",
   "docs.sidebar.category.spaces": "Spaces",
   "docs.sidebar.createSpace": "Create a space",
   "docs.sidebar.favorites.empty": "Drag favorite items here or click the star icon on any space",
@@ -66,10 +67,8 @@
   "docs.sidebar.nav.home": "Home",
   "docs.sidebar.search.placeholder": "Find docs",
   "docs.sidebar.space.copyLink": "Copy link",
-  "docs.sidebar.space.favorite": "Add to favorites",
   "docs.sidebar.space.leave": "Leave space",
   "docs.sidebar.space.menu": "Space options for {name}",
-  "docs.sidebar.space.unfavorite": "Remove from favorites",
   "docs.sidebar.team.createTeam": "Create a team",
   "docs.sidebar.team.invite": "Invite people",
   "docs.sidebar.team.invite.secondary": "Add or invite people to the team",

From ba0848c5b889c7fa199927c328cd52f22d414815 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 17:32:03 -0500
Subject: [PATCH 04/68] refactor(docs): drop the vestigial create-space URL
 field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The slug/URL field became dead weight once spaces route by opaque server
id: it was collected and format-validated but never sent or used. Remove
it from the create-space modal and the form/schema — slug is gone from
CreateSpaceInput, the form values, and the Zod schema (with its Url*
errors and slugify helper). The UrlInput form-control component and its
test are kept for reuse. Re-extract en.json (drops the url.* messages).
---
 webapp/i18n/en.json                           |  4 --
 .../create_space_modal.test.tsx               |  2 +-
 .../create_space_modal/create_space_modal.tsx | 20 +--------
 .../create_space_modal/validation_messages.ts | 11 +----
 webapp/src/data/docs_data_source.ts           |  6 +--
 webapp/src/hooks/spaces.ts                    | 44 +++----------------
 webapp/src/types/docs.ts                      |  6 +--
 webapp/src/validation/space_schema.ts         | 28 +-----------
 8 files changed, 15 insertions(+), 106 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 9c97e02..159e5e8 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -8,9 +8,6 @@
   "docs.createSpace.error.description.tooLong": "Description must be {max} characters or fewer",
   "docs.createSpace.error.name.required": "Please enter a name for the space",
   "docs.createSpace.error.name.tooLong": "Name must be {max} characters or fewer",
-  "docs.createSpace.error.url.invalid": "Use lowercase letters, numbers, and dashes, with no spaces",
-  "docs.createSpace.error.url.required": "Please enter a URL for the space",
-  "docs.createSpace.error.url.tooLong": "URL must be {max} characters or fewer",
   "docs.createSpace.nameLabel": "Space name",
   "docs.createSpace.permissionsNote": "Specific edit and sharing permissions can be defined once the space is created.",
   "docs.createSpace.private.description": "Only invited members",
@@ -19,7 +16,6 @@
   "docs.createSpace.public.description": "Any team member can view",
   "docs.createSpace.public.title": "Public Space",
   "docs.createSpace.title": "Create a new space",
-  "docs.createSpace.urlAriaLabel": "Space URL",
   "docs.createSpace.visibilityLabel": "Space visibility",
   "docs.editor.header.draft": "Draft · {spaceId} / {pageId}",
   "docs.editor.header.published": "Published · {spaceId} / {pageId}",
diff --git a/webapp/src/components/create_space_modal/create_space_modal.test.tsx b/webapp/src/components/create_space_modal/create_space_modal.test.tsx
index c1d0359..ba23ef3 100644
--- a/webapp/src/components/create_space_modal/create_space_modal.test.tsx
+++ b/webapp/src/components/create_space_modal/create_space_modal.test.tsx
@@ -19,7 +19,7 @@ function typeName(value: string) {
 
 describe('CreateSpaceModal', () => {
     // Stub the API create so the form path doesn't hit the network; the server
-    // assigns the opaque id, so the returned space's id is unrelated to the slug.
+    // assigns the opaque id.
     beforeEach(() => {
         jest.spyOn(docsDataSource, 'createSpace').mockImplementation(
             async (_teamId, input) => makeSpace('new-space-id', input.title.trim(), 'team1'),
diff --git a/webapp/src/components/create_space_modal/create_space_modal.tsx b/webapp/src/components/create_space_modal/create_space_modal.tsx
index 5bdafd9..422a6d0 100644
--- a/webapp/src/components/create_space_modal/create_space_modal.tsx
+++ b/webapp/src/components/create_space_modal/create_space_modal.tsx
@@ -14,7 +14,6 @@ import type {SelectorOption} from 'components/form-controls/public_private_selec
 import PublicPrivateSelector from 'components/form-controls/public_private_selector';
 import TextArea from 'components/form-controls/text_area';
 import TextInput from 'components/form-controls/text_input';
-import UrlInput from 'components/form-controls/url_input';
 import GenericModal from 'components/generic_modal/generic_modal';
 
 import type {Space, SpaceVisibility} from 'types/docs';
@@ -32,7 +31,7 @@ const DEFAULT_SPACE_EMOJI = '📄';
 const CreateSpaceModal = ({onClose, onCreated}: Props) => {
     const {formatMessage} = useIntl();
 
-    const {form, slugSchema, baseUrl, changeName, changeSlug, submit, urlInputRef} = useCreateSpace({
+    const {form, changeName, submit} = useCreateSpace({
         onCreated: (space) => {
             onCreated?.(space);
             onClose();
@@ -106,23 +105,6 @@ const CreateSpaceModal = ({onClose, onCreated}: Props) => {
                             />
                         )}
                     </form.Field>
-                    <form.Field
-                        name='slug'
-                        validators={{onBlurAsync: slugSchema}}
-                    >
-                        {(field) => (
-                            <UrlInput
-                                ref={urlInputRef}
-                                id='docs-create-space-url'
-                                ariaLabel={formatMessage({id: 'docs.createSpace.urlAriaLabel', defaultMessage: 'Space URL'})}
-                                baseUrl={baseUrl}
-                                value={field.state.value}
-                                onChange={changeSlug}
-                                onBlur={field.handleBlur}
-                                error={firstSpaceValidationError(field.state.meta.errors, formatMessage)}
-                            />
-                        )}
-                    </form.Field>
                 </div>
 
                 <div className={styles.group}>
diff --git a/webapp/src/components/create_space_modal/validation_messages.ts b/webapp/src/components/create_space_modal/validation_messages.ts
index 888fa92..cda84c8 100644
--- a/webapp/src/components/create_space_modal/validation_messages.ts
+++ b/webapp/src/components/create_space_modal/validation_messages.ts
@@ -3,16 +3,13 @@
 
 import {defineMessages} from 'react-intl';
 import type {IntlShape} from 'react-intl';
-import {SPACE_DESCRIPTION_MAX_LENGTH, SPACE_NAME_MAX_LENGTH, SPACE_SLUG_MAX_LENGTH, SpaceValidationError} from 'validation/space_schema';
+import {SPACE_DESCRIPTION_MAX_LENGTH, SPACE_NAME_MAX_LENGTH, SpaceValidationError} from 'validation/space_schema';
 
 type FormatMessage = IntlShape['formatMessage'];
 
 const messages = defineMessages({
     nameRequired: {id: 'docs.createSpace.error.name.required', defaultMessage: 'Please enter a name for the space'},
     nameTooLong: {id: 'docs.createSpace.error.name.tooLong', defaultMessage: 'Name must be {max} characters or fewer'},
-    urlRequired: {id: 'docs.createSpace.error.url.required', defaultMessage: 'Please enter a URL for the space'},
-    urlTooLong: {id: 'docs.createSpace.error.url.tooLong', defaultMessage: 'URL must be {max} characters or fewer'},
-    urlInvalid: {id: 'docs.createSpace.error.url.invalid', defaultMessage: 'Use lowercase letters, numbers, and dashes, with no spaces'},
     descriptionTooLong: {id: 'docs.createSpace.error.description.tooLong', defaultMessage: 'Description must be {max} characters or fewer'},
 });
 
@@ -25,12 +22,6 @@ export function resolveSpaceValidationError(id: string, formatMessage: FormatMes
         return formatMessage(messages.nameRequired);
     case SpaceValidationError.NameTooLong:
         return formatMessage(messages.nameTooLong, {max: SPACE_NAME_MAX_LENGTH});
-    case SpaceValidationError.UrlRequired:
-        return formatMessage(messages.urlRequired);
-    case SpaceValidationError.UrlTooLong:
-        return formatMessage(messages.urlTooLong, {max: SPACE_SLUG_MAX_LENGTH});
-    case SpaceValidationError.UrlInvalid:
-        return formatMessage(messages.urlInvalid);
     case SpaceValidationError.DescriptionTooLong:
         return formatMessage(messages.descriptionTooLong, {max: SPACE_DESCRIPTION_MAX_LENGTH});
     default:
diff --git a/webapp/src/data/docs_data_source.ts b/webapp/src/data/docs_data_source.ts
index a1e9329..c83c7d1 100644
--- a/webapp/src/data/docs_data_source.ts
+++ b/webapp/src/data/docs_data_source.ts
@@ -19,9 +19,9 @@ export interface DocsDataSource {
     getSpace(spaceId: string): Promise<Space | undefined>;
 
     // Creates a space in the team and returns it (with its server-assigned id
-    // and team_id). Only server-supported fields are sent; client-only fields
-    // (slug, visibility) are dropped by the API source until the server models
-    // them (see PR #10's view_access).
+    // and team_id). Only server-supported fields are sent; the client-only
+    // visibility is dropped by the API source until the server models it (see
+    // PR #10's view_access).
     createSpace(teamId: string, input: CreateSpaceInput): Promise<Space>;
 
     // Removes a member from a space. Leaving a space is removing yourself; the
diff --git a/webapp/src/hooks/spaces.ts b/webapp/src/hooks/spaces.ts
index d123ea3..1b7c2f8 100644
--- a/webapp/src/hooks/spaces.ts
+++ b/webapp/src/hooks/spaces.ts
@@ -4,18 +4,14 @@
 import {useForm} from '@tanstack/react-form';
 import {getSpaceViews, recordSpaceView} from 'data/recent_spaces';
 import {useAppDispatch, useAppSelector} from 'hooks/redux';
-import {useTeamContext} from 'hooks/team';
-import {useCallback, useEffect, useMemo, useRef} from 'react';
-import {DOCS_KEYWORD} from 'routing/paths';
-import {createSpaceFormSchema, slugify} from 'validation/space_schema';
+import {useCallback, useEffect, useMemo} from 'react';
+import {createSpaceFormSchema} from 'validation/space_schema';
 
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import {createSpace} from 'store/actions';
 import {getAllSpaces, getSpace, getSpacesForCurrentTeam} from 'store/selectors';
 
-import type {UrlInputHandle} from 'components/form-controls/url_input';
-
 import type {Space, SpaceSummary, SpaceVisibility} from 'types/docs';
 
 export function useSpaces(): Space[] {
@@ -60,14 +56,12 @@ export function useRecordSpaceView(spaceId?: string): void {
 
 type CreateSpaceValues = {
     name: string;
-    slug: string;
     visibility: SpaceVisibility;
     description: string;
 };
 
 const INITIAL_VALUES: CreateSpaceValues = {
     name: '',
-    slug: '',
     visibility: 'public',
     description: '',
 };
@@ -77,21 +71,11 @@ type CreateSpaceOptions = {
 };
 
 // Owns the create-space form via TanStack Form. The Zod schema drives validation
-// through TanStack's validators (its issues distribute to fields by path). The
-// slug is a client-only vanity field for now — the server assigns an opaque id
-// and has no slug concept, so there's no uniqueness check; only format is
-// validated (the slug's on-blur schema).
+// through TanStack's validators (its issues distribute to fields by path).
 export function useCreateSpace({onCreated}: CreateSpaceOptions = {}) {
-    const {name: teamName} = useTeamContext();
     const dispatch = useAppDispatch();
 
     const formSchema = useMemo(() => createSpaceFormSchema(), []);
-    const slugSchema = useMemo(() => formSchema.shape.slug, [formSchema]);
-
-    // Stop deriving the slug from the name once the user edits the slug directly.
-    const slugEdited = useRef(false);
-
-    const urlInputRef = useRef<UrlInputHandle>(null);
 
     const form = useForm({
         defaultValues: INITIAL_VALUES,
@@ -99,7 +83,6 @@ export function useCreateSpace({onCreated}: CreateSpaceOptions = {}) {
         onSubmit: async ({value}) => {
             const space = await dispatch(createSpace({
                 title: value.name.trim(),
-                slug: value.slug.trim(),
                 visibility: value.visibility,
                 description: value.description.trim() || undefined,
             }));
@@ -109,26 +92,9 @@ export function useCreateSpace({onCreated}: CreateSpaceOptions = {}) {
 
     const changeName = useCallback((name: string) => {
         form.setFieldValue('name', name);
-        if (!slugEdited.current) {
-            form.setFieldValue('slug', slugify(name));
-        }
-    }, [form]);
-
-    const changeSlug = useCallback((slug: string) => {
-        slugEdited.current = true;
-        form.setFieldValue('slug', slug);
-    }, [form]);
-
-    // Submits, then surfaces a rejected slug (e.g. a bad format) by focusing the
-    // URL input — otherwise the error lands on the field's read-only preview.
-    const submit = useCallback(async () => {
-        await form.handleSubmit();
-        if ((form.getFieldMeta('slug')?.errors.length ?? 0) > 0) {
-            urlInputRef.current?.focus();
-        }
     }, [form]);
 
-    const baseUrl = useMemo(() => `${window.location.origin}/${teamName}/${DOCS_KEYWORD}`, [teamName]);
+    const submit = useCallback(() => form.handleSubmit(), [form]);
 
-    return {form, slugSchema, baseUrl, changeName, changeSlug, submit, urlInputRef};
+    return {form, changeName, submit};
 }
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index a2e0ac8..8ca45e4 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -26,12 +26,10 @@ export type Space = {
 };
 
 // The fields the create-space form collects. The data source turns this into a
-// Space (assigning the opaque id, etc.).
+// Space (assigning the opaque id, etc.). visibility is client-only for now (maps
+// to the server's view_access later).
 export type CreateSpaceInput = {
     title: string;
-
-    // Vanity URL segment, derived from the title but independently editable.
-    slug: string;
     visibility: SpaceVisibility;
     description?: string;
     icon?: string;
diff --git a/webapp/src/validation/space_schema.ts b/webapp/src/validation/space_schema.ts
index 4972577..da03ae2 100644
--- a/webapp/src/validation/space_schema.ts
+++ b/webapp/src/validation/space_schema.ts
@@ -10,29 +10,19 @@ import {z} from 'zod';
 // state so TanStack distributes each issue to its field by path.
 
 export const SPACE_NAME_MAX_LENGTH = 64;
-export const SPACE_SLUG_MAX_LENGTH = 64;
 export const SPACE_DESCRIPTION_MAX_LENGTH = 1024;
 
-// Lowercase alphanumerics and single dashes, not leading/trailing — the same
-// shape Mattermost uses for channel URL names.
-const SLUG_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
-
 // Stable ids for each validation failure; the UI maps these to messages.
 export const SpaceValidationError = {
     NameRequired: 'name.required',
     NameTooLong: 'name.tooLong',
-    UrlRequired: 'url.required',
-    UrlTooLong: 'url.tooLong',
-    UrlInvalid: 'url.invalid',
     DescriptionTooLong: 'description.tooLong',
 } as const;
 
 export type SpaceValidationError = typeof SpaceValidationError[keyof typeof SpaceValidationError];
 
-// One schema for the whole form. The slug is a client-only vanity field (the
-// server assigns an opaque id and has no slug concept), so it's only format-
-// validated — no uniqueness check. Consumers that validate the slug on its own
-// (the URL field, on blur) derive it with `createSpaceFormSchema().shape.slug`.
+// One schema for the whole form. Field keys match the form state so TanStack
+// distributes each issue to its field by path.
 export function createSpaceFormSchema() {
     return z.object({
         name: z.
@@ -40,12 +30,6 @@ export function createSpaceFormSchema() {
             trim().
             min(1, {error: SpaceValidationError.NameRequired}).
             max(SPACE_NAME_MAX_LENGTH, {error: SpaceValidationError.NameTooLong}),
-        slug: z.
-            string().
-            trim().
-            min(1, {error: SpaceValidationError.UrlRequired, abort: true}).
-            max(SPACE_SLUG_MAX_LENGTH, {error: SpaceValidationError.UrlTooLong, abort: true}).
-            regex(SLUG_PATTERN, {error: SpaceValidationError.UrlInvalid, abort: true}),
         visibility: z.enum(['public', 'private']),
 
         // Required string (may be empty) to match the always-present form field;
@@ -58,11 +42,3 @@ export function createSpaceFormSchema() {
 }
 
 export type SpaceFormValues = z.infer<ReturnType<typeof createSpaceFormSchema>>;
-
-export function slugify(value: string): string {
-    return value.
-        toLowerCase().
-        trim().
-        replace(/[^a-z0-9]+/g, '-').
-        replace(/^-+|-+$/g, '');
-}

From 0c349ae61920e7024ecc4bc3a7558ae7527be4ce Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 17:49:52 -0500
Subject: [PATCH 05/68] feat(docs): generic space-icon fallback and switcher
 recent polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Custom emoji/icon picking is deferred, so a space without a custom icon
renders a generic compass glyph (utils/space_icon: <SpaceIcon>, using the
product's file-text-outline) everywhere a space icon shows — sidebar, home
cards, main content, switcher, and the create-space name field — so a
freshly created space never appears blank. A space with a custom emoji
renders that character.

Switcher: rename the "Recent docs" group to "Recent", and dedupe — a space
already listed under Recent is no longer repeated under "Your spaces".
---
 webapp/i18n/en.json                           |  2 +-
 .../create_space_modal/create_space_modal.tsx |  5 ++--
 webapp/src/components/docs_home/docs_home.tsx |  6 ++++-
 .../docs_root/docs_main_content.tsx           | 11 ++++++++-
 .../docs_switcher/docs_switcher.tsx           | 16 ++++++++++---
 .../components/spaces_sidebar/space_item.tsx  |  6 ++++-
 webapp/src/utils/space_icon.tsx               | 24 +++++++++++++++++++
 7 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 webapp/src/utils/space_icon.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 159e5e8..2fa3f36 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -73,7 +73,7 @@
   "docs.sidebar.team.members": "Manage members",
   "docs.sidebar.team.menu": "Manage {teamName}",
   "docs.sidebar.team.settings": "Team settings",
-  "docs.switcher.group.recent": "Recent docs",
+  "docs.switcher.group.recent": "Recent",
   "docs.switcher.group.results": "Spaces and pages",
   "docs.switcher.group.spaces": "Your spaces",
   "docs.switcher.noResults": "No spaces or pages found",
diff --git a/webapp/src/components/create_space_modal/create_space_modal.tsx b/webapp/src/components/create_space_modal/create_space_modal.tsx
index 422a6d0..bf9d174 100644
--- a/webapp/src/components/create_space_modal/create_space_modal.tsx
+++ b/webapp/src/components/create_space_modal/create_space_modal.tsx
@@ -4,6 +4,7 @@
 import {useCreateSpace} from 'hooks/spaces';
 import React from 'react';
 import {useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
 import {SPACE_DESCRIPTION_MAX_LENGTH, SPACE_NAME_MAX_LENGTH} from 'validation/space_schema';
 
 import GlobeIcon from '@mattermost/compass-icons/components/globe';
@@ -26,8 +27,6 @@ type Props = {
     onCreated?: (space: Space) => void;
 };
 
-const DEFAULT_SPACE_EMOJI = '📄';
-
 const CreateSpaceModal = ({onClose, onCreated}: Props) => {
     const {formatMessage} = useIntl();
 
@@ -97,7 +96,7 @@ const CreateSpaceModal = ({onClose, onCreated}: Props) => {
                                 label={formatMessage({id: 'docs.createSpace.nameLabel', defaultMessage: 'Space name'})}
                                 value={field.state.value}
                                 onChange={changeName}
-                                leading={<span aria-hidden='true'>{DEFAULT_SPACE_EMOJI}</span>}
+                                leading={<span aria-hidden='true'><SpaceIcon size={20}/></span>}
                                 error={firstSpaceValidationError(field.state.meta.errors, formatMessage)}
                                 maxLength={SPACE_NAME_MAX_LENGTH}
                                 autoFocus={true}
diff --git a/webapp/src/components/docs_home/docs_home.tsx b/webapp/src/components/docs_home/docs_home.tsx
index 88ac443..8473921 100644
--- a/webapp/src/components/docs_home/docs_home.tsx
+++ b/webapp/src/components/docs_home/docs_home.tsx
@@ -6,6 +6,7 @@ import {useRecentSpaceSummaries} from 'hooks/spaces';
 import {useCurrentUser} from 'hooks/user';
 import React from 'react';
 import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
 import {Timestamp} from 'webapp_globals';
 import type {TimestampUnit} from 'webapp_globals';
 
@@ -183,7 +184,10 @@ const SpaceCard = ({summary, onOpen}: {summary: SpaceSummary; onOpen: (id: strin
                 className={styles.spaceCardEmoji}
                 aria-hidden='true'
             >
-                {space.icon}
+                <SpaceIcon
+                    space={space}
+                    size={20}
+                />
             </span>
             <span className={styles.spaceCardText}>
                 <span className={styles.spaceCardName}>{space.title}</span>
diff --git a/webapp/src/components/docs_root/docs_main_content.tsx b/webapp/src/components/docs_root/docs_main_content.tsx
index 497074b..0d76828 100644
--- a/webapp/src/components/docs_root/docs_main_content.tsx
+++ b/webapp/src/components/docs_root/docs_main_content.tsx
@@ -4,6 +4,7 @@
 import {useSpace} from 'hooks/spaces';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
 
 import DocsHome from 'components/docs_home/docs_home';
 import PageEditor from 'components/page_editor/page_editor';
@@ -48,7 +49,15 @@ const DocsMainContent = ({spaceId, pageId, isDraft, onCreateSpace, onBrowseSpace
             <div className={styles.empty}>
                 <h2 className={styles.title}>
                     {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- decorative emoji, not translatable */}
-                    <span aria-hidden={true}>{space.icon ? `${space.icon} ` : null}</span>
+                    <span
+                        aria-hidden={true}
+                        style={{marginInlineEnd: '0.25em'}}
+                    >
+                        <SpaceIcon
+                            space={space}
+                            size={20}
+                        />
+                    </span>
                     {space.title}
                 </h2>
                 <p className={styles.subtitle}>
diff --git a/webapp/src/components/docs_switcher/docs_switcher.tsx b/webapp/src/components/docs_switcher/docs_switcher.tsx
index adc17d7..65b6263 100644
--- a/webapp/src/components/docs_switcher/docs_switcher.tsx
+++ b/webapp/src/components/docs_switcher/docs_switcher.tsx
@@ -9,6 +9,7 @@ import {useAllSpaces} from 'hooks/spaces';
 import {useTeamNamesById} from 'hooks/team';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
 
 import MagnifyIcon from '@mattermost/compass-icons/components/magnify';
 import TextBoxOutlineIcon from '@mattermost/compass-icons/components/text-box-outline';
@@ -75,16 +76,20 @@ const DocsSwitcher = ({onClose}: Props) => {
             }];
         }
 
+        const recentSpaceIds = new Set(recent.spaces.map((space) => space.id));
+
         return [
             {
                 id: 'recent',
-                title: formatMessage({id: 'docs.switcher.group.recent', defaultMessage: 'Recent docs'}),
+                title: formatMessage({id: 'docs.switcher.group.recent', defaultMessage: 'Recent'}),
                 entries: [...recent.spaces.map(spaceEntry), ...recent.pages.map(pageEntry)],
             },
             {
                 id: 'spaces',
                 title: formatMessage({id: 'docs.switcher.group.spaces', defaultMessage: 'Your spaces'}),
-                entries: allSpaces.map(spaceEntry),
+
+                // Don't repeat a space already surfaced under Recent above.
+                entries: allSpaces.filter((space) => !recentSpaceIds.has(space.id)).map(spaceEntry),
             },
         ];
     }, [hasQuery, results, recent, allSpaces, formatMessage]);
@@ -163,7 +168,12 @@ const DocsSwitcher = ({onClose}: Props) => {
         >
             {entry.kind === 'space' ? (
                 <>
-                    <span className={classNames(styles.itemIcon, styles.itemIconEmoji)}>{entry.space.icon}</span>
+                    <span className={classNames(styles.itemIcon, styles.itemIconEmoji)}>
+                        <SpaceIcon
+                            space={entry.space}
+                            size={16}
+                        />
+                    </span>
                     <span className={styles.itemLabel}>{entry.space.title}</span>
                 </>
             ) : (
diff --git a/webapp/src/components/spaces_sidebar/space_item.tsx b/webapp/src/components/spaces_sidebar/space_item.tsx
index f46c67a..8cb522e 100644
--- a/webapp/src/components/spaces_sidebar/space_item.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item.tsx
@@ -4,6 +4,7 @@
 import {DropIndicator} from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import classNames from 'classnames';
 import React, {useState} from 'react';
+import {SpaceIcon} from 'utils/space_icon';
 
 import type {Space} from 'types/docs';
 
@@ -32,7 +33,10 @@ const SpaceItem = ({space, category, active, dndEnabled, onSelect}: Props) => {
             className={styles.emoji}
             aria-hidden={true}
         >
-            {space.icon}
+            <SpaceIcon
+                space={space}
+                size={16}
+            />
         </span>
     );
 
diff --git a/webapp/src/utils/space_icon.tsx b/webapp/src/utils/space_icon.tsx
new file mode 100644
index 0000000..de0552e
--- /dev/null
+++ b/webapp/src/utils/space_icon.tsx
@@ -0,0 +1,24 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';
+
+import type {Space} from 'types/docs';
+
+// A space's icon: its custom emoji when set, otherwise a generic compass glyph
+// (the product's file-text-outline). Custom emoji/icon picking is deferred, so
+// most spaces render the fallback today. `space` is optional so the create
+// form can render the standard icon before a space exists.
+type Props = {
+    space?: Pick<Space, 'icon'>;
+    size: number;
+};
+
+export function SpaceIcon({space, size}: Props): JSX.Element {
+    if (space?.icon) {
+        return <>{space.icon}</>;
+    }
+    return <FileTextOutlineIcon size={size}/>;
+}

From 2dd9e2e30a42b2c0933ce6c5cea605aa851d4307 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 18:07:14 -0500
Subject: [PATCH 06/68] revert(docs-editor): remove non-working stub page
 editor

Reverts 13b2db3 (soft-merge of PR #7's stub editor): the mounted editor
wasn't working. Drops the page_editor component, the editor slice from
webapp_globals, and the pageId->PageEditor routing in docs_main_content
(back to the space/page placeholder). Later work on the touched files
(SpaceIcon, useRecordSpaceView) is preserved. Re-extract en.json.
---
 webapp/i18n/en.json                           |   5 +-
 .../docs_root/docs_main_content.tsx           |  33 ++--
 webapp/src/components/docs_root/docs_root.tsx |   3 +-
 .../page_editor/page_editor.module.scss       |  42 ----
 .../components/page_editor/page_editor.tsx    |  63 ------
 webapp/src/webapp_globals.ts                  | 182 +-----------------
 6 files changed, 24 insertions(+), 304 deletions(-)
 delete mode 100644 webapp/src/components/page_editor/page_editor.module.scss
 delete mode 100644 webapp/src/components/page_editor/page_editor.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 2fa3f36..0d95eb9 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -17,10 +17,6 @@
   "docs.createSpace.public.title": "Public Space",
   "docs.createSpace.title": "Create a new space",
   "docs.createSpace.visibilityLabel": "Space visibility",
-  "docs.editor.header.draft": "Draft · {spaceId} / {pageId}",
-  "docs.editor.header.published": "Published · {spaceId} / {pageId}",
-  "docs.editor.hostMissing": "This Mattermost build does not publish the Docs editor. Update the server to edit pages here.",
-  "docs.editor.stub.body": "Editor is available and will mount here. Suggestion providers exposed: {providerCount}.",
   "docs.form.url.edit": "Edit",
   "docs.form.url.label": "URL:",
   "docs.genericModal.close": "Close",
@@ -52,6 +48,7 @@
   "docs.leaveSpace.confirm": "Yes, leave space",
   "docs.leaveSpace.message": "Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.",
   "docs.leaveSpace.title": "Leave {name}",
+  "docs.main.page": "Page {pageId}",
   "docs.main.spaceOverview": "Space overview",
   "docs.sidebar.add.browse": "Browse spaces",
   "docs.sidebar.add.create": "Create a space",
diff --git a/webapp/src/components/docs_root/docs_main_content.tsx b/webapp/src/components/docs_root/docs_main_content.tsx
index 0d76828..2778025 100644
--- a/webapp/src/components/docs_root/docs_main_content.tsx
+++ b/webapp/src/components/docs_root/docs_main_content.tsx
@@ -7,22 +7,19 @@ import {FormattedMessage} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
 
 import DocsHome from 'components/docs_home/docs_home';
-import PageEditor from 'components/page_editor/page_editor';
 
 import styles from './docs_main_content.module.scss';
 
 type Props = {
     spaceId?: string;
     pageId?: string;
-    isDraft?: boolean;
     onCreateSpace: () => void;
     onBrowseSpaces: () => void;
 };
 
 // The space view is built later; for now a routed space renders a placeholder
-// that reflects the routed space/page. When a page is routed we hand off to
-// PageEditor
-const DocsMainContent = ({spaceId, pageId, isDraft, onCreateSpace, onBrowseSpaces}: Props) => {
+// that reflects the routed space/page to keep the URL observable.
+const DocsMainContent = ({spaceId, pageId, onCreateSpace, onBrowseSpaces}: Props) => {
     const space = useSpace(spaceId);
 
     if (!space) {
@@ -34,16 +31,6 @@ const DocsMainContent = ({spaceId, pageId, isDraft, onCreateSpace, onBrowseSpace
         );
     }
 
-    if (pageId) {
-        return (
-            <PageEditor
-                spaceId={space.id}
-                pageId={pageId}
-                isDraft={Boolean(isDraft)}
-            />
-        );
-    }
-
     return (
         <div className={styles.root}>
             <div className={styles.empty}>
@@ -61,10 +48,18 @@ const DocsMainContent = ({spaceId, pageId, isDraft, onCreateSpace, onBrowseSpace
                     {space.title}
                 </h2>
                 <p className={styles.subtitle}>
-                    <FormattedMessage
-                        id='docs.main.spaceOverview'
-                        defaultMessage='Space overview'
-                    />
+                    {pageId ? (
+                        <FormattedMessage
+                            id='docs.main.page'
+                            defaultMessage='Page {pageId}'
+                            values={{pageId}}
+                        />
+                    ) : (
+                        <FormattedMessage
+                            id='docs.main.spaceOverview'
+                            defaultMessage='Space overview'
+                        />
+                    )}
                 </p>
             </div>
         </div>
diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index d1922ff..3e1f074 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -17,7 +17,7 @@ import styles from './docs_root.module.scss';
 const DocsRoot = () => {
     useBootstrapDocs();
 
-    const {spaceId, pageId, isDraft} = useDocsNavigation();
+    const {spaceId, pageId} = useDocsNavigation();
 
     useRecordSpaceView(spaceId);
 
@@ -47,7 +47,6 @@ const DocsRoot = () => {
                 <DocsMainContent
                     spaceId={spaceId}
                     pageId={pageId}
-                    isDraft={isDraft}
                     onCreateSpace={openCreateSpace}
                     onBrowseSpaces={openSwitcher}
                 />
diff --git a/webapp/src/components/page_editor/page_editor.module.scss b/webapp/src/components/page_editor/page_editor.module.scss
deleted file mode 100644
index 7818986..0000000
--- a/webapp/src/components/page_editor/page_editor.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 24px 32px;
-    gap: 16px;
-    overflow: auto;
-}
-
-.header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: var(--center-channel-color);
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-}
-
-.stub {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    padding: 32px;
-    border: 1px dashed rgba(var(--center-channel-color-rgb), 0.24);
-    border-radius: 8px;
-    color: var(--center-channel-color);
-    font-size: 14px;
-    text-align: center;
-}
-
-.empty {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    padding: 48px 24px;
-    color: var(--center-channel-color);
-    font-size: 14px;
-    text-align: center;
-}
diff --git a/webapp/src/components/page_editor/page_editor.tsx b/webapp/src/components/page_editor/page_editor.tsx
deleted file mode 100644
index eeb24e7..0000000
--- a/webapp/src/components/page_editor/page_editor.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
-import {hostCanUseEditor, hostGetEditor} from 'webapp_globals';
-
-import styles from './page_editor.module.scss';
-
-type Props = {
-    spaceId: string;
-    pageId: string;
-    isDraft: boolean;
-};
-
-// Placeholder mount for the WYSIWYG editor. This ticket only wires the
-// component to the page route and proves the host slice resolves
-const PageEditor = ({spaceId, pageId, isDraft}: Props) => {
-    if (!hostCanUseEditor()) {
-        return (
-            <div className={styles.empty}>
-                <FormattedMessage
-                    id='docs.editor.hostMissing'
-                    defaultMessage='This Mattermost build does not publish the Docs editor. Update the server to edit pages here.'
-                />
-            </div>
-        );
-    }
-
-    const editor = hostGetEditor();
-    const providerCount = editor?.providers ? Object.keys(editor.providers).length : 0;
-
-    return (
-        <div className={styles.root}>
-            <div className={styles.header}>
-                <span>
-                    {isDraft ? (
-                        <FormattedMessage
-                            id='docs.editor.header.draft'
-                            defaultMessage='Draft · {spaceId} / {pageId}'
-                            values={{spaceId, pageId}}
-                        />
-                    ) : (
-                        <FormattedMessage
-                            id='docs.editor.header.published'
-                            defaultMessage='Published · {spaceId} / {pageId}'
-                            values={{spaceId, pageId}}
-                        />
-                    )}
-                </span>
-            </div>
-            <div className={styles.stub}>
-                <FormattedMessage
-                    id='docs.editor.stub.body'
-                    defaultMessage='Editor is available and will mount here. Suggestion providers exposed: {providerCount}.'
-                    values={{providerCount}}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default PageEditor;
diff --git a/webapp/src/webapp_globals.ts b/webapp/src/webapp_globals.ts
index af00657..c4970fb 100644
--- a/webapp/src/webapp_globals.ts
+++ b/webapp/src/webapp_globals.ts
@@ -2,28 +2,20 @@
 // See LICENSE.txt for license information.
 
 import type {History} from 'history';
-import type {ComponentType, ElementType, ForwardRefExoticComponent, KeyboardEvent, KeyboardEventHandler, ReactNode, ReactNodeArray, RefAttributes, RefObject} from 'react';
-import type {MessageDescriptor} from 'react-intl';
+import type {ComponentType, ReactNode} from 'react';
 import type {Action} from 'redux';
 
-import type {Agent} from '@mattermost/types/agents';
-import type {Channel} from '@mattermost/types/channels';
-import type {Group} from '@mattermost/types/groups';
-import type {UserProfile} from '@mattermost/types/users';
-
 // Hand-typed view of the API the host web app attaches to `window` for plugins
 // (core's plugins/export.ts). The host guarantees these at runtime; anything
 // missing degrades to a no-op.
 //
-// TRANSITION-MIGRATION: the modal and editor contracts below now live in core
-// as @mattermost/shared/types/global (WindowShared, PublishedModalUtils,
-// PublishedEditorUtils, PublishedSuggestionProviderConstructors, etc.). Our
-// pinned @mattermost/shared release doesn't export them yet, so they're
-// mirrored here. Replace this slice with those imports once the dependency is
-// bumped to a version that ships types/global — which also lets openModalById
-// be typed per-modal, and the editor components import from their canonical
-// source instead of this local mirror. browserHistory has not migrated into
-// WindowShared yet, so it stays here too.
+// TRANSITION-MIGRATION: the modal contract below now lives in core as
+// @mattermost/shared/types/global (WindowShared, PublishedModalUtils,
+// PublishedModalId, PublishedModalProps). Our pinned @mattermost/shared release
+// doesn't export it yet, so it's mirrored here. Replace this slice with those
+// imports once the dependency is bumped to a version that ships types/global —
+// which also lets openModalById/dialogProps be typed per-modal instead of loose.
+// browserHistory has not migrated into WindowShared yet, so it stays here too.
 
 type PublishedModalId = 'user_settings' | 'invitation' | 'team_settings' | 'team_members' | 'leave_team';
 
@@ -38,153 +30,9 @@ type PublishedModalUtils = {
     canOpenModalId: (modalId: string) => boolean;
 };
 
-export type ActionResult<Data = unknown, Error = unknown> = {
-    data?: Data;
-    error?: Error;
-};
-
-type Loading = {loading: boolean};
-
-type ComponentOrComponents = {
-    component: ElementType;
-} | {
-    components: ElementType[];
-};
-
-export type ProviderResultsGroup<Item = unknown> = {
-    key: string;
-    label?: MessageDescriptor;
-    terms: string[];
-    items: Array<Item | Loading>;
-} & ComponentOrComponents;
-
-export type ProviderResults<Item = unknown> =
-    | {matchedPretext: string; groups: Array<ProviderResultsGroup<Item>>}
-    | ({matchedPretext: string; terms: string[]; items: Array<Item | Loading>} & ComponentOrComponents);
-
-type SuggestionResultsGroup<Item = unknown> = {
-    key: string;
-    label?: MessageDescriptor;
-    terms: string[];
-    items: Array<Item | Loading>;
-    components: ElementType[];
-};
-
-export type SuggestionResults<Item = unknown> =
-    | {matchedPretext: string; groups: Array<SuggestionResultsGroup<Item>>}
-    | {matchedPretext: string; terms: string[]; items: Array<Item | Loading>; components: ElementType[]};
-
-export type WysiwygEditorProps = {
-    value: string;
-    onChange: (markdown: string) => void;
-    onSubmit: () => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    placeholder?: string;
-    channelId: string;
-    rootId?: string;
-    disabled?: boolean;
-    id?: string;
-    useCtrlSend?: boolean;
-    sendCodeBlockOnCtrlEnter?: boolean;
-    onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
-};
-
-export type SuggestionListProps = {
-    inputRef?: RefObject<HTMLDivElement>;
-    open: boolean;
-    position?: 'top' | 'bottom';
-    renderNoResults?: boolean;
-    onCompleteWord: (term: string, matchedPretext: string, e?: KeyboardEventHandler<HTMLDivElement>) => boolean;
-    preventClose?: () => void;
-    onItemHover: (term: string) => void;
-    pretext: string;
-    cleared: boolean;
-    results: SuggestionResults;
-    selection: string;
-    suggestionBoxAlgn?: {
-        lineHeight?: number;
-        pixelsToMoveX?: number;
-        pixelsToMoveY?: number;
-    };
-};
-
-export type PublishedMarkdownMode = 'bold' | 'italic' | 'link' | 'strike' | 'code' | 'heading' | 'quote' | 'ul' | 'ol';
-
-export type FormattingBarProps = {
-    applyFormatting: (mode: PublishedMarkdownMode) => void;
-    disableControls: boolean;
-    location: string;
-    additionalControls?: ReactNodeArray;
-    aiActionsMenu?: ReactNode;
-
-    // Returns a Tiptap Editor. Left as `unknown` so consumers don't have to
-    // depend on `@tiptap/react` transitively; cast at the call site.
-    getEditor?: () => unknown;
-};
-
-export type PublishedWysiwygEditorHandle = {
-    insertText: (text: string) => void;
-    focus: () => void;
-    blur: () => void;
-    getInputBox: () => HTMLElement | null;
-};
-
-export type PublishedFormattingBarHandle = {
-    openLinkPopover: () => void;
-};
-
-export type SuggestionProviderInstance = {
-    triggerCharacter?: string;
-    handlePretextChanged: (pretext: string, resultsCallback: (results: ProviderResults) => void) => boolean | void;
-};
-
-export type AtMentionProviderOptions = {
-    currentUserId: string;
-    channelId: string;
-    autocompleteUsersInChannel: (prefix: string) => Promise<ActionResult>;
-    useChannelMentions: boolean;
-    autocompleteGroups: Group[] | null;
-    searchAssociatedGroupsForReference: (prefix: string) => Promise<ActionResult<Group[]>>;
-    priorityProfiles: UserProfile[] | undefined;
-    defaultAgent?: Agent;
-};
-
-export type CommandProviderOptions = {
-    teamId: string;
-    channelId: string;
-    rootId?: string;
-};
-
-export type ChannelMentionProviderArgs = [
-    channelSearchFunc: (
-        term: string,
-        success: (channels: Channel[]) => void,
-        error: () => void,
-    ) => Promise<ActionResult>,
-    delayChannelAutocomplete: boolean,
-];
-
-export type PublishedSuggestionProviderConstructors = {
-    AtMention: new (options: AtMentionProviderOptions) => SuggestionProviderInstance;
-    ChannelMention: new (...args: ChannelMentionProviderArgs) => SuggestionProviderInstance;
-    Command: new (options: CommandProviderOptions) => SuggestionProviderInstance;
-    Emoticon: new () => SuggestionProviderInstance;
-};
-
-export type PublishedSuggestionProviderId = keyof PublishedSuggestionProviderConstructors;
-
-export type PublishedEditorUtils = {
-    WysiwygEditor: ForwardRefExoticComponent<WysiwygEditorProps & RefAttributes<PublishedWysiwygEditorHandle>>;
-    SuggestionList: ComponentType<SuggestionListProps>;
-    FormattingBar: ForwardRefExoticComponent<FormattingBarProps & RefAttributes<PublishedFormattingBarHandle>>;
-    providers: PublishedSuggestionProviderConstructors;
-};
-
 type WebappUtils = {
     browserHistory?: History;
     modals?: Partial<PublishedModalUtils>;
-    editor?: Partial<PublishedEditorUtils>;
 };
 
 const webappUtils = (): WebappUtils => (window as unknown as {WebappUtils?: WebappUtils}).WebappUtils ?? {};
@@ -230,17 +78,3 @@ export function hostCanOpenModal(modalId: string): boolean {
 export function hostOpenModalAction(modalId: PublishedModalId, dialogProps?: Record<string, unknown>): Action | undefined {
     return webappUtils().modals?.openModalById?.(modalId, dialogProps);
 }
-
-// Whether the running host publishes the WYSIWYG editor surface. Older hosts
-// (predating MM-69774) don't attach `editor` — callers should fall back to a
-// read-only render or an "update your server" empty state.
-export function hostCanUseEditor(): boolean {
-    return Boolean(webappUtils().editor?.WysiwygEditor);
-}
-
-// The published editor components + suggestion provider constructors, or
-// undefined when the host doesn't expose them. Fields are individually optional
-// so a newer host can add pieces without breaking older plugin bundles.
-export function hostGetEditor(): Partial<PublishedEditorUtils> | undefined {
-    return webappUtils().editor;
-}

From 69edb2df1f5680b755c3c7d4c6342e584622993b Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 18:21:17 -0500
Subject: [PATCH 07/68] feat(docs): build the Space Home main content UI

Implements the space main-content view (Figma Space Home) as a new
space_view component set, replacing the routed-space placeholder:

- SpaceTitleBar: favorite, space icon + title + menu, member count, space
  details, Share
- PageBar: page-tree toggle + "Pages", "Updated <relative>" (host
  Timestamp), comments, Edit, overflow, expand
- PageHero: rounded banner with the space icon/title, description (with a
  placeholder when empty), and a pages/members/views stats row
- Page body: a placeholder until the editor is mounted

Uses Mattermost theme tokens and compass icons. Data-less bits are honest
placeholders for now: the stat counts and title-bar member count render an
em dash (await the pages/members/views APIs), member avatars are omitted,
and the controls are visual scaffolding wired in later passes.
---
 webapp/i18n/en.json                           |  18 ++-
 .../docs_root/docs_main_content.module.scss   |  34 ------
 .../docs_root/docs_main_content.tsx           |  45 +------
 .../space_view/page_bar.module.scss           | 103 ++++++++++++++++
 webapp/src/components/space_view/page_bar.tsx | 115 ++++++++++++++++++
 .../space_view/page_hero.module.scss          |  81 ++++++++++++
 .../src/components/space_view/page_hero.tsx   |  70 +++++++++++
 .../space_view/space_title_bar.module.scss    |  98 +++++++++++++++
 .../components/space_view/space_title_bar.tsx |  89 ++++++++++++++
 .../space_view/space_view.module.scss         |  27 ++++
 .../src/components/space_view/space_view.tsx  |  35 ++++++
 11 files changed, 639 insertions(+), 76 deletions(-)
 delete mode 100644 webapp/src/components/docs_root/docs_main_content.module.scss
 create mode 100644 webapp/src/components/space_view/page_bar.module.scss
 create mode 100644 webapp/src/components/space_view/page_bar.tsx
 create mode 100644 webapp/src/components/space_view/page_hero.module.scss
 create mode 100644 webapp/src/components/space_view/page_hero.tsx
 create mode 100644 webapp/src/components/space_view/space_title_bar.module.scss
 create mode 100644 webapp/src/components/space_view/space_title_bar.tsx
 create mode 100644 webapp/src/components/space_view/space_view.module.scss
 create mode 100644 webapp/src/components/space_view/space_view.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 0d95eb9..417a6a4 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -48,8 +48,6 @@
   "docs.leaveSpace.confirm": "Yes, leave space",
   "docs.leaveSpace.message": "Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.",
   "docs.leaveSpace.title": "Leave {name}",
-  "docs.main.page": "Page {pageId}",
-  "docs.main.spaceOverview": "Space overview",
   "docs.sidebar.add.browse": "Browse spaces",
   "docs.sidebar.add.create": "Create a space",
   "docs.sidebar.add.menu": "Add or browse spaces",
@@ -70,6 +68,22 @@
   "docs.sidebar.team.members": "Manage members",
   "docs.sidebar.team.menu": "Manage {teamName}",
   "docs.sidebar.team.settings": "Team settings",
+  "docs.space.bodyPlaceholder": "Page content will appear here once the editor is available.",
+  "docs.space.comments": "Comments",
+  "docs.space.descriptionPlaceholder": "Add a space description here — just a brief summary of the purpose for this space.",
+  "docs.space.details": "Space details",
+  "docs.space.edit": "Edit",
+  "docs.space.expand": "Expand",
+  "docs.space.favorite": "Favorite this space",
+  "docs.space.menu": "Space options",
+  "docs.space.more": "More actions",
+  "docs.space.pages": "Pages",
+  "docs.space.pages.toggle": "Toggle page tree",
+  "docs.space.share": "Share",
+  "docs.space.stat.members": "Members",
+  "docs.space.stat.pages": "Pages",
+  "docs.space.stat.views": "Views",
+  "docs.space.updated": "Updated {relative}",
   "docs.switcher.group.recent": "Recent",
   "docs.switcher.group.results": "Spaces and pages",
   "docs.switcher.group.spaces": "Your spaces",
diff --git a/webapp/src/components/docs_root/docs_main_content.module.scss b/webapp/src/components/docs_root/docs_main_content.module.scss
deleted file mode 100644
index d75b27e..0000000
--- a/webapp/src/components/docs_root/docs_main_content.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.root {
-    display: flex;
-    flex: 1 1 0;
-    flex-direction: column;
-    min-width: 0;
-    height: 100%;
-    background: var(--center-channel-bg);
-}
-
-.empty {
-    display: flex;
-    flex: 1 1 0;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    text-align: center;
-}
-
-.title {
-    margin: 0;
-    color: var(--center-channel-color);
-    font-family: 'Metropolis', sans-serif;
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 28px;
-}
-
-.subtitle {
-    margin: 0;
-    color: rgba(var(--center-channel-color-rgb), 0.72);
-    font-size: 14px;
-    line-height: 20px;
-}
diff --git a/webapp/src/components/docs_root/docs_main_content.tsx b/webapp/src/components/docs_root/docs_main_content.tsx
index 2778025..0b633f3 100644
--- a/webapp/src/components/docs_root/docs_main_content.tsx
+++ b/webapp/src/components/docs_root/docs_main_content.tsx
@@ -3,12 +3,9 @@
 
 import {useSpace} from 'hooks/spaces';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
-import {SpaceIcon} from 'utils/space_icon';
 
 import DocsHome from 'components/docs_home/docs_home';
-
-import styles from './docs_main_content.module.scss';
+import SpaceView from 'components/space_view/space_view';
 
 type Props = {
     spaceId?: string;
@@ -17,9 +14,9 @@ type Props = {
     onBrowseSpaces: () => void;
 };
 
-// The space view is built later; for now a routed space renders a placeholder
-// that reflects the routed space/page to keep the URL observable.
-const DocsMainContent = ({spaceId, pageId, onCreateSpace, onBrowseSpaces}: Props) => {
+// No routed space → the product Home; a routed space → its main content view
+// (the page editor within it is mounted later).
+const DocsMainContent = ({spaceId, onCreateSpace, onBrowseSpaces}: Props) => {
     const space = useSpace(spaceId);
 
     if (!space) {
@@ -31,39 +28,7 @@ const DocsMainContent = ({spaceId, pageId, onCreateSpace, onBrowseSpaces}: Props
         );
     }
 
-    return (
-        <div className={styles.root}>
-            <div className={styles.empty}>
-                <h2 className={styles.title}>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- decorative emoji, not translatable */}
-                    <span
-                        aria-hidden={true}
-                        style={{marginInlineEnd: '0.25em'}}
-                    >
-                        <SpaceIcon
-                            space={space}
-                            size={20}
-                        />
-                    </span>
-                    {space.title}
-                </h2>
-                <p className={styles.subtitle}>
-                    {pageId ? (
-                        <FormattedMessage
-                            id='docs.main.page'
-                            defaultMessage='Page {pageId}'
-                            values={{pageId}}
-                        />
-                    ) : (
-                        <FormattedMessage
-                            id='docs.main.spaceOverview'
-                            defaultMessage='Space overview'
-                        />
-                    )}
-                </p>
-            </div>
-        </div>
-    );
+    return <SpaceView space={space}/>;
 };
 
 export default DocsMainContent;
diff --git a/webapp/src/components/space_view/page_bar.module.scss b/webapp/src/components/space_view/page_bar.module.scss
new file mode 100644
index 0000000..bff1bec
--- /dev/null
+++ b/webapp/src/components/space_view/page_bar.module.scss
@@ -0,0 +1,103 @@
+.bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 40px;
+    padding: 0 12px 0 8px;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: var(--center-channel-bg);
+}
+
+.left {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: center;
+}
+
+.right {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+}
+
+.pagesToggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}
+
+.pagesLabel {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.updated {
+    margin-right: 8px;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.iconButton {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+    }
+}
+
+.badge {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid var(--center-channel-bg);
+    border-radius: 50%;
+    background: var(--button-bg);
+}
+
+.edit {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 28px;
+    margin: 0 4px;
+    padding: 0 12px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--center-channel-color);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}
diff --git a/webapp/src/components/space_view/page_bar.tsx b/webapp/src/components/space_view/page_bar.tsx
new file mode 100644
index 0000000..f3080a5
--- /dev/null
+++ b/webapp/src/components/space_view/page_bar.tsx
@@ -0,0 +1,115 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {Timestamp} from 'webapp_globals';
+import type {TimestampUnit} from 'webapp_globals';
+
+import ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';
+import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';
+import FormatListBulletedIcon from '@mattermost/compass-icons/components/format-list-bulleted';
+import MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';
+import PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';
+
+import type {Space} from 'types/docs';
+
+import styles from './page_bar.module.scss';
+
+// Relative "Updated …" buckets for the host Timestamp.
+const UPDATED_TIME_SPEC: TimestampUnit[] = [
+    ['minute', -59],
+    ['hour', -48],
+    ['day', -30],
+    ['month', -12],
+    'year',
+];
+
+// Controls (pages toggle, comments, edit, overflow, expand) are visual
+// scaffolding wired in later passes.
+const PageBar = ({space}: {space: Space}) => {
+    const {formatMessage} = useIntl();
+
+    const pagesLabel = formatMessage({id: 'docs.space.pages.toggle', defaultMessage: 'Toggle page tree'});
+    const commentsLabel = formatMessage({id: 'docs.space.comments', defaultMessage: 'Comments'});
+    const moreLabel = formatMessage({id: 'docs.space.more', defaultMessage: 'More actions'});
+    const expandLabel = formatMessage({id: 'docs.space.expand', defaultMessage: 'Expand'});
+
+    // Timestamp's `style` is a narrow/short/long format variant, not a DOM style object.
+    /* eslint-disable react/style-prop-object */
+    const updatedRelative = Timestamp ? (
+        <Timestamp
+            value={space.update_at}
+            units={UPDATED_TIME_SPEC}
+            useTime={false}
+            style='narrow'
+        />
+    ) : null;
+    /* eslint-enable react/style-prop-object */
+
+    return (
+        <div className={styles.bar}>
+            <div className={styles.left}>
+                <button
+                    type='button'
+                    className={styles.pagesToggle}
+                    aria-label={pagesLabel}
+                >
+                    <FormatListBulletedIcon size={18}/>
+                    <span className={styles.pagesLabel}>
+                        <FormattedMessage
+                            id='docs.space.pages'
+                            defaultMessage='Pages'
+                        />
+                    </span>
+                </button>
+            </div>
+
+            <div className={styles.right}>
+                {updatedRelative && (
+                    <span className={styles.updated}>
+                        <FormattedMessage
+                            id='docs.space.updated'
+                            defaultMessage='Updated {relative}'
+                            values={{relative: updatedRelative}}
+                        />
+                    </span>
+                )}
+                <button
+                    type='button'
+                    className={styles.iconButton}
+                    aria-label={commentsLabel}
+                >
+                    <MessageTextOutlineIcon size={18}/>
+                    <span className={styles.badge}/>
+                </button>
+                <button
+                    type='button'
+                    className={styles.edit}
+                >
+                    <PencilOutlineIcon size={14}/>
+                    <FormattedMessage
+                        id='docs.space.edit'
+                        defaultMessage='Edit'
+                    />
+                </button>
+                <button
+                    type='button'
+                    className={styles.iconButton}
+                    aria-label={moreLabel}
+                >
+                    <DotsHorizontalIcon size={18}/>
+                </button>
+                <button
+                    type='button'
+                    className={styles.iconButton}
+                    aria-label={expandLabel}
+                >
+                    <ArrowExpandIcon size={16}/>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default PageBar;
diff --git a/webapp/src/components/space_view/page_hero.module.scss b/webapp/src/components/space_view/page_hero.module.scss
new file mode 100644
index 0000000..2209304
--- /dev/null
+++ b/webapp/src/components/space_view/page_hero.module.scss
@@ -0,0 +1,81 @@
+.hero {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px 28px;
+    border-radius: 12px;
+    background: rgba(var(--button-bg-rgb), 0.08);
+}
+
+.heading {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.iconTile {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background: var(--center-channel-bg);
+    font-size: 28px;
+    line-height: 1;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
+}
+
+.title {
+    margin: 0;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 40px;
+}
+
+.description {
+    margin: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.descriptionMuted {
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+}
+
+.stats {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.stat {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-right: 24px;
+    border-right: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+.stat:last-of-type {
+    border-right: none;
+}
+
+.statValue {
+    color: var(--center-channel-color);
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.statLabel {
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
diff --git a/webapp/src/components/space_view/page_hero.tsx b/webapp/src/components/space_view/page_hero.tsx
new file mode 100644
index 0000000..1890993
--- /dev/null
+++ b/webapp/src/components/space_view/page_hero.tsx
@@ -0,0 +1,70 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
+
+import type {Space} from 'types/docs';
+
+import styles from './page_hero.module.scss';
+
+type Stat = {
+    key: string;
+    value: number | undefined;
+    label: string;
+};
+
+// Space front-door banner: icon + title, description, and a stats row. Counts
+// (pages/members/views) aren't wired to the server yet, so they render an
+// em dash until the member/page/view APIs feed them.
+const PageHero = ({space}: {space: Space}) => {
+    const {formatMessage} = useIntl();
+
+    const stats: Stat[] = [
+        {key: 'pages', value: undefined, label: formatMessage({id: 'docs.space.stat.pages', defaultMessage: 'Pages'})},
+        {key: 'members', value: undefined, label: formatMessage({id: 'docs.space.stat.members', defaultMessage: 'Members'})},
+        {key: 'views', value: undefined, label: formatMessage({id: 'docs.space.stat.views', defaultMessage: 'Views'})},
+    ];
+
+    return (
+        <section className={styles.hero}>
+            <div className={styles.heading}>
+                <span
+                    className={styles.iconTile}
+                    aria-hidden={true}
+                >
+                    <SpaceIcon
+                        space={space}
+                        size={28}
+                    />
+                </span>
+                <h1 className={styles.title}>{space.title}</h1>
+            </div>
+
+            {space.description ? (
+                <p className={styles.description}>{space.description}</p>
+            ) : (
+                <p className={classNames(styles.description, styles.descriptionMuted)}>
+                    {formatMessage({id: 'docs.space.descriptionPlaceholder', defaultMessage: 'Add a space description here — just a brief summary of the purpose for this space.'})}
+                </p>
+            )}
+
+            <div className={styles.stats}>
+                {stats.map((stat) => (
+                    <div
+                        key={stat.key}
+                        className={styles.stat}
+                    >
+                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- em dash placeholder until counts are wired */}
+                        <span className={styles.statValue}>{stat.value ?? '—'}</span>
+                        <span className={styles.statLabel}>{stat.label}</span>
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
+};
+
+export default PageHero;
diff --git a/webapp/src/components/space_view/space_title_bar.module.scss b/webapp/src/components/space_view/space_title_bar.module.scss
new file mode 100644
index 0000000..be6f50f
--- /dev/null
+++ b/webapp/src/components/space_view/space_title_bar.module.scss
@@ -0,0 +1,98 @@
+.bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 48px;
+    padding: 0 12px 0 8px;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: var(--center-channel-bg);
+}
+
+.left {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: center;
+    gap: 8px;
+}
+
+.right {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+}
+
+.titleTrigger {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 6px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}
+
+.emoji {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    font-size: 18px;
+    line-height: 1;
+}
+
+.title {
+    overflow: hidden;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chevron {
+    flex-shrink: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.members {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.iconButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+    }
+}
+
+.share {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_title_bar.tsx
new file mode 100644
index 0000000..f1a4825
--- /dev/null
+++ b/webapp/src/components/space_view/space_title_bar.tsx
@@ -0,0 +1,89 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
+
+import AccountMultipleOutlineIcon from '@mattermost/compass-icons/components/account-multiple-outline';
+import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
+import InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';
+import ShareVariantOutlineIcon from '@mattermost/compass-icons/components/share-variant-outline';
+import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
+
+import {PrimaryButton} from 'components/form-controls/button';
+
+import type {Space} from 'types/docs';
+
+import styles from './space_title_bar.module.scss';
+
+// The controls here (favorite, space menu, details, share) are visual scaffolding
+// — wired in later passes. Member count awaits the space-members API.
+const SpaceTitleBar = ({space}: {space: Space}) => {
+    const {formatMessage} = useIntl();
+
+    const favoriteLabel = formatMessage({id: 'docs.space.favorite', defaultMessage: 'Favorite this space'});
+    const menuLabel = formatMessage({id: 'docs.space.menu', defaultMessage: 'Space options'});
+    const detailsLabel = formatMessage({id: 'docs.space.details', defaultMessage: 'Space details'});
+
+    return (
+        <div className={styles.bar}>
+            <div className={styles.left}>
+                <button
+                    type='button'
+                    className={styles.iconButton}
+                    aria-label={favoriteLabel}
+                >
+                    <StarOutlineIcon size={18}/>
+                </button>
+                <button
+                    type='button'
+                    className={styles.titleTrigger}
+                    aria-label={menuLabel}
+                >
+                    <span
+                        className={styles.emoji}
+                        aria-hidden={true}
+                    >
+                        <SpaceIcon
+                            space={space}
+                            size={18}
+                        />
+                    </span>
+                    <span className={styles.title}>{space.title}</span>
+                    <ChevronDownIcon
+                        className={styles.chevron}
+                        size={16}
+                    />
+                </button>
+                <span className={styles.members}>
+                    <AccountMultipleOutlineIcon size={16}/>
+
+                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- em dash placeholder until the members API is wired */}
+                    <span>{'—'}</span>
+                </span>
+            </div>
+
+            <div className={styles.right}>
+                <button
+                    type='button'
+                    className={styles.iconButton}
+                    aria-label={detailsLabel}
+                >
+                    <InformationOutlineIcon size={18}/>
+                </button>
+                <PrimaryButton type='button'>
+                    <span className={styles.share}>
+                        <ShareVariantOutlineIcon size={16}/>
+                        <FormattedMessage
+                            id='docs.space.share'
+                            defaultMessage='Share'
+                        />
+                    </span>
+                </PrimaryButton>
+            </div>
+        </div>
+    );
+};
+
+export default SpaceTitleBar;
diff --git a/webapp/src/components/space_view/space_view.module.scss b/webapp/src/components/space_view/space_view.module.scss
new file mode 100644
index 0000000..014d15e
--- /dev/null
+++ b/webapp/src/components/space_view/space_view.module.scss
@@ -0,0 +1,27 @@
+.root {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+    background: var(--center-channel-bg);
+}
+
+.scroll {
+    flex: 1 1 0;
+    overflow-y: auto;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 20px 24px;
+}
+
+.body {
+    padding: 8px 4px 40px;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-size: 14px;
+    line-height: 20px;
+}
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
new file mode 100644
index 0000000..c607578
--- /dev/null
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import type {Space} from 'types/docs';
+
+import PageBar from './page_bar';
+import PageHero from './page_hero';
+import SpaceTitleBar from './space_title_bar';
+import styles from './space_view.module.scss';
+
+// Main content for a routed space: the space title bar and page bar over the
+// front-door page (hero). The page body is a placeholder until the editor is
+// mounted (a later pass).
+const SpaceView = ({space}: {space: Space}) => (
+    <div className={styles.root}>
+        <SpaceTitleBar space={space}/>
+        <PageBar space={space}/>
+        <div className={styles.scroll}>
+            <div className={styles.content}>
+                <PageHero space={space}/>
+                <div className={styles.body}>
+                    <FormattedMessage
+                        id='docs.space.bodyPlaceholder'
+                        defaultMessage='Page content will appear here once the editor is available.'
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+);
+
+export default SpaceView;

From 90c36515508e29b70765a473506618e048a50938 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 18:31:23 -0500
Subject: [PATCH 08/68] feat(docs): wire space page and member count pipelines

Feeds the Space Home stats and title-bar member count with real data.

- data: add listSpaceMembers over GET /spaces/{id}/members; normalize the
  page-list summaries (no body) to Page for the store
- store: new spaceMembers slice (user ids per space) + fetchSpaceMembers;
  fetchPages now stores pages for the count (reused by the page tree later)
- selectors: getSpaceMemberIds; page count derives from getPagesForSpace
- hooks: useSpaceStats loads both on space mount and returns the counts
- space view: real PAGES and MEMBERS counts in the hero and the title-bar
  member count

Views has no server source yet, so that stat stays an em dash.
---
 .../src/components/space_view/page_hero.tsx   | 18 ++++++---
 .../components/space_view/space_title_bar.tsx | 10 ++---
 .../src/components/space_view/space_view.tsx  | 38 ++++++++++++-------
 webapp/src/data/api_data_source.ts            | 13 ++++++-
 webapp/src/data/docs_data_source.ts           | 10 +++--
 webapp/src/hooks/spaces.ts                    | 26 ++++++++++++-
 webapp/src/store/action_types.ts              |  1 +
 webapp/src/store/actions.ts                   | 26 +++++++++++--
 webapp/src/store/reducer.ts                   | 25 +++++++++++-
 webapp/src/store/selectors.test.ts            |  2 +
 webapp/src/store/selectors.ts                 |  6 +++
 webapp/src/types/docs.ts                      |  6 +++
 webapp/tests/react_testing_utils.tsx          |  1 +
 13 files changed, 145 insertions(+), 37 deletions(-)

diff --git a/webapp/src/components/space_view/page_hero.tsx b/webapp/src/components/space_view/page_hero.tsx
index 1890993..5db3d7a 100644
--- a/webapp/src/components/space_view/page_hero.tsx
+++ b/webapp/src/components/space_view/page_hero.tsx
@@ -16,15 +16,21 @@ type Stat = {
     label: string;
 };
 
-// Space front-door banner: icon + title, description, and a stats row. Counts
-// (pages/members/views) aren't wired to the server yet, so they render an
-// em dash until the member/page/view APIs feed them.
-const PageHero = ({space}: {space: Space}) => {
+type Props = {
+    space: Space;
+    pageCount: number;
+    memberCount: number;
+};
+
+// Space front-door banner: icon + title, description, and a stats row. Page and
+// member counts are wired to the server; views has no source yet, so it renders
+// an em dash.
+const PageHero = ({space, pageCount, memberCount}: Props) => {
     const {formatMessage} = useIntl();
 
     const stats: Stat[] = [
-        {key: 'pages', value: undefined, label: formatMessage({id: 'docs.space.stat.pages', defaultMessage: 'Pages'})},
-        {key: 'members', value: undefined, label: formatMessage({id: 'docs.space.stat.members', defaultMessage: 'Members'})},
+        {key: 'pages', value: pageCount, label: formatMessage({id: 'docs.space.stat.pages', defaultMessage: 'Pages'})},
+        {key: 'members', value: memberCount, label: formatMessage({id: 'docs.space.stat.members', defaultMessage: 'Members'})},
         {key: 'views', value: undefined, label: formatMessage({id: 'docs.space.stat.views', defaultMessage: 'Views'})},
     ];
 
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_title_bar.tsx
index f1a4825..4d056e3 100644
--- a/webapp/src/components/space_view/space_title_bar.tsx
+++ b/webapp/src/components/space_view/space_title_bar.tsx
@@ -17,9 +17,9 @@ import type {Space} from 'types/docs';
 
 import styles from './space_title_bar.module.scss';
 
-// The controls here (favorite, space menu, details, share) are visual scaffolding
-// — wired in later passes. Member count awaits the space-members API.
-const SpaceTitleBar = ({space}: {space: Space}) => {
+// The controls here (favorite, space menu, details, share) are visual
+// scaffolding — wired in later passes.
+const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}) => {
     const {formatMessage} = useIntl();
 
     const favoriteLabel = formatMessage({id: 'docs.space.favorite', defaultMessage: 'Favorite this space'});
@@ -58,9 +58,7 @@ const SpaceTitleBar = ({space}: {space: Space}) => {
                 </button>
                 <span className={styles.members}>
                     <AccountMultipleOutlineIcon size={16}/>
-
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- em dash placeholder until the members API is wired */}
-                    <span>{'—'}</span>
+                    <span>{memberCount}</span>
                 </span>
             </div>
 
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index c607578..6d72666 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {useSpaceStats} from 'hooks/spaces';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -14,22 +15,33 @@ import styles from './space_view.module.scss';
 // Main content for a routed space: the space title bar and page bar over the
 // front-door page (hero). The page body is a placeholder until the editor is
 // mounted (a later pass).
-const SpaceView = ({space}: {space: Space}) => (
-    <div className={styles.root}>
-        <SpaceTitleBar space={space}/>
-        <PageBar space={space}/>
-        <div className={styles.scroll}>
-            <div className={styles.content}>
-                <PageHero space={space}/>
-                <div className={styles.body}>
-                    <FormattedMessage
-                        id='docs.space.bodyPlaceholder'
-                        defaultMessage='Page content will appear here once the editor is available.'
+const SpaceView = ({space}: {space: Space}) => {
+    const {pageCount, memberCount} = useSpaceStats(space.id);
+
+    return (
+        <div className={styles.root}>
+            <SpaceTitleBar
+                space={space}
+                memberCount={memberCount}
+            />
+            <PageBar space={space}/>
+            <div className={styles.scroll}>
+                <div className={styles.content}>
+                    <PageHero
+                        space={space}
+                        pageCount={pageCount}
+                        memberCount={memberCount}
                     />
+                    <div className={styles.body}>
+                        <FormattedMessage
+                            id='docs.space.bodyPlaceholder'
+                            defaultMessage='Page content will appear here once the editor is available.'
+                        />
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-);
+    );
+};
 
 export default SpaceView;
diff --git a/webapp/src/data/api_data_source.ts b/webapp/src/data/api_data_source.ts
index 8eda041..50d0e82 100644
--- a/webapp/src/data/api_data_source.ts
+++ b/webapp/src/data/api_data_source.ts
@@ -3,10 +3,14 @@
 
 import {apiUrl, listAll, restDelete, restGet, restPost} from 'client/rest';
 
-import type {CreateSpaceInput, Page, Space} from 'types/docs';
+import type {CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
 
 import type {DocsDataSource} from './docs_data_source';
 
+// The server's page list returns summaries (no body/delete_at); fill the fields
+// the store's Page type needs so a summary is a valid, body-less Page.
+const toPage = (summary: Page): Page => ({...summary, body: summary.body ?? '', delete_at: summary.delete_at ?? 0});
+
 // Docs data over the plugin REST API (server/api.go). Ids are opaque; lists are
 // paginated ({items, has_more}) and followed to completion by listAll.
 export const apiDataSource: DocsDataSource = {
@@ -22,5 +26,10 @@ export const apiDataSource: DocsDataSource = {
 
     removeSpaceMember: (spaceId, userId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}/members/${userId}`),
 
-    listPages: (spaceId) => listAll<Page>((query) => `${apiUrl()}/spaces/${spaceId}/pages?${query}`),
+    listSpaceMembers: (spaceId) => listAll<SpaceMember>((query) => `${apiUrl()}/spaces/${spaceId}/members?${query}`),
+
+    listPages: async (spaceId) => {
+        const summaries = await listAll<Page>((query) => `${apiUrl()}/spaces/${spaceId}/pages?${query}`);
+        return summaries.map(toPage);
+    },
 };
diff --git a/webapp/src/data/docs_data_source.ts b/webapp/src/data/docs_data_source.ts
index c83c7d1..8e1632e 100644
--- a/webapp/src/data/docs_data_source.ts
+++ b/webapp/src/data/docs_data_source.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {CreateSpaceInput, Page, Space} from 'types/docs';
+import type {CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
 
 // The seam between the store's thunks and the Docs server REST API. The
 // API-backed source implements this over the plugin's /api/v1 routes; the
@@ -28,7 +28,11 @@ export interface DocsDataSource {
     // server rejects removing the last authorized member (409).
     removeSpaceMember(spaceId: string, userId: string): Promise<void>;
 
-    // Pages belong to a space. No page-consuming UI exists yet, so this is
-    // wired for later; the server returns page summaries (no body).
+    // Members of a space (user ids only). Backs the member count and, later,
+    // member avatars.
+    listSpaceMembers(spaceId: string): Promise<SpaceMember[]>;
+
+    // Pages in a space. The server returns page summaries (no body); the source
+    // normalizes them to Page with an empty body for the store.
     listPages(spaceId: string): Promise<Page[]>;
 }
diff --git a/webapp/src/hooks/spaces.ts b/webapp/src/hooks/spaces.ts
index 1b7c2f8..6374a9b 100644
--- a/webapp/src/hooks/spaces.ts
+++ b/webapp/src/hooks/spaces.ts
@@ -9,8 +9,8 @@ import {createSpaceFormSchema} from 'validation/space_schema';
 
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
-import {createSpace} from 'store/actions';
-import {getAllSpaces, getSpace, getSpacesForCurrentTeam} from 'store/selectors';
+import {createSpace, fetchPages, fetchSpaceMembers} from 'store/actions';
+import {getAllSpaces, getPagesForSpace, getSpace, getSpaceMemberIds, getSpacesForCurrentTeam} from 'store/selectors';
 
 import type {Space, SpaceSummary, SpaceVisibility} from 'types/docs';
 
@@ -43,6 +43,28 @@ export function useRecentSpaceSummaries(): SpaceSummary[] {
     }, [userId, teamSpaces]);
 }
 
+export type SpaceStats = {
+    pageCount: number;
+    memberCount: number;
+};
+
+// Loads and returns a space's page and member counts. Fetches on mount into the
+// store, so the page tree and member avatars can reuse the same data later. The
+// view count has no server source yet, so it isn't included.
+export function useSpaceStats(spaceId: string): SpaceStats {
+    const dispatch = useAppDispatch();
+
+    useEffect(() => {
+        dispatch(fetchPages(spaceId));
+        dispatch(fetchSpaceMembers(spaceId));
+    }, [dispatch, spaceId]);
+
+    const pages = useAppSelector((state) => getPagesForSpace(state, spaceId));
+    const memberIds = useAppSelector((state) => getSpaceMemberIds(state, spaceId));
+
+    return {pageCount: pages.length, memberCount: memberIds.length};
+}
+
 // Records that the current user viewed a space, feeding the recently-viewed
 // list. No-op until both ids are known.
 export function useRecordSpaceView(spaceId?: string): void {
diff --git a/webapp/src/store/action_types.ts b/webapp/src/store/action_types.ts
index 4ae6df9..6c885e6 100644
--- a/webapp/src/store/action_types.ts
+++ b/webapp/src/store/action_types.ts
@@ -7,6 +7,7 @@ export const SpaceTypes = {
     RECEIVED_SPACES: manifest.id + '_received_spaces',
     CREATED_SPACE: manifest.id + '_created_space',
     DELETED_SPACE: manifest.id + '_deleted_space',
+    RECEIVED_SPACE_MEMBERS: manifest.id + '_received_space_members',
 } as const;
 
 export const PageTypes = {
diff --git a/webapp/src/store/actions.ts b/webapp/src/store/actions.ts
index bc8b0a3..e2f92df 100644
--- a/webapp/src/store/actions.ts
+++ b/webapp/src/store/actions.ts
@@ -45,12 +45,30 @@ export function fetchAllSpaces(): DocsThunkAction<Promise<void>> {
     };
 }
 
-// Loads a space's pages. Wired for the page tree that lands later; no UI reads
-// store pages yet, so this isn't called on bootstrap.
+// Loads a space's pages into the store (backs the page count today, the page
+// tree later). Best-effort: a failure leaves the count at its current value.
 export function fetchPages(spaceId: string): DocsThunkAction<Promise<void>> {
     return async (dispatch) => {
-        const pages = await docsDataSource.listPages(spaceId);
-        dispatch({type: PageTypes.RECEIVED_PAGES, pages});
+        try {
+            const pages = await docsDataSource.listPages(spaceId);
+            dispatch({type: PageTypes.RECEIVED_PAGES, pages});
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to load pages', error);
+        }
+    };
+}
+
+// Loads a space's members (user ids) into the store, backing the member count.
+export function fetchSpaceMembers(spaceId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch) => {
+        try {
+            const members = await docsDataSource.listSpaceMembers(spaceId);
+            dispatch({type: SpaceTypes.RECEIVED_SPACE_MEMBERS, spaceId, userIds: members.map((m) => m.user_id)});
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to load space members', error);
+        }
     };
 }
 
diff --git a/webapp/src/store/reducer.ts b/webapp/src/store/reducer.ts
index 10d2ab0..f38329c 100644
--- a/webapp/src/store/reducer.ts
+++ b/webapp/src/store/reducer.ts
@@ -12,6 +12,7 @@ type ReceivedSpacesAction = {spaces: Space[]};
 type CreatedSpaceAction = {space: Space};
 type DeletedSpaceAction = {spaceId: string};
 type ReceivedPagesAction = {pages: Page[]};
+type ReceivedSpaceMembersAction = {spaceId: string; userIds: string[]};
 
 // SpaceTypes'/PageTypes' values aren't string-literal types (manifest.id is
 // loaded via JSON.parse), so `action.type` can't discriminate a union by
@@ -145,6 +146,28 @@ function pagesInSpace(state: Record<string, Set<string>> = {}, action: UnknownAc
     }
 }
 
-const reducer = combineReducers({spaces, spacesInTeam, pages, pagesInSpace});
+// Space member user ids, keyed by space id. Roles/capabilities are hidden by
+// the server, so this is just membership (count today, avatars later).
+function spaceMembers(state: Record<string, string[]> = {}, action: UnknownAction): Record<string, string[]> {
+    switch (action.type) {
+    case SpaceTypes.RECEIVED_SPACE_MEMBERS: {
+        const {spaceId, userIds} = action as unknown as ReceivedSpaceMembersAction;
+        return {...state, [spaceId]: userIds};
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        if (!(spaceId in state)) {
+            return state;
+        }
+        const next = {...state};
+        delete next[spaceId];
+        return next;
+    }
+    default:
+        return state;
+    }
+}
+
+const reducer = combineReducers({spaces, spacesInTeam, pages, pagesInSpace, spaceMembers});
 
 export default reducer;
diff --git a/webapp/src/store/selectors.test.ts b/webapp/src/store/selectors.test.ts
index eb104ed..57c8c23 100644
--- a/webapp/src/store/selectors.test.ts
+++ b/webapp/src/store/selectors.test.ts
@@ -22,6 +22,7 @@ describe('getSpacesInTeam', () => {
             spacesInTeam: {t1: new Set(['a', 'b', 'missing'])},
             pages: {},
             pagesInSpace: {},
+            spaceMembers: {},
         });
 
         expect(getSpacesInTeam(state, 't1')).toEqual([spaceB, spaceA]);
@@ -39,6 +40,7 @@ describe('getPagesForSpace', () => {
             spacesInTeam: {},
             pages: {p1: page1, p2: page2},
             pagesInSpace: {'space-a': new Set(['p1']), 'space-b': new Set(['p2'])},
+            spaceMembers: {},
         });
 
         expect(getPagesForSpace(state, 'space-a')).toEqual([page1]);
diff --git a/webapp/src/store/selectors.ts b/webapp/src/store/selectors.ts
index 699f3da..31fad49 100644
--- a/webapp/src/store/selectors.ts
+++ b/webapp/src/store/selectors.ts
@@ -17,6 +17,7 @@ const EMPTY_PLUGIN_STATE: DocsPluginState = {
     spacesInTeam: {},
     pages: {},
     pagesInSpace: {},
+    spaceMembers: {},
 };
 
 const EMPTY_SPACES: Space[] = [];
@@ -58,6 +59,11 @@ export const getPagesById = (state: GlobalState): Record<string, Page> => plugin
 
 export const getPagesInSpaceIndex = (state: GlobalState): Record<string, Set<string>> => pluginState(state).pagesInSpace;
 
+const EMPTY_MEMBER_IDS: string[] = [];
+
+export const getSpaceMemberIds = (state: GlobalState, spaceId: string): string[] =>
+    pluginState(state).spaceMembers[spaceId] ?? EMPTY_MEMBER_IDS;
+
 // Spaces for an explicit team, resolved through the byId map and sorted.
 // Mirrors core's getChannelsInTeam-style read: index Set → entities → order.
 export const getSpacesInTeam = createSelector(
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index 8ca45e4..ad932f2 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -25,6 +25,12 @@ export type Space = {
     visibility?: SpaceVisibility;
 };
 
+// A space member. The server exposes only the user id (roles/capabilities are
+// hidden); the user profile is resolved from the host store when needed.
+export type SpaceMember = {
+    user_id: string;
+};
+
 // The fields the create-space form collects. The data source turns this into a
 // Space (assigning the opaque id, etc.). visibility is client-only for now (maps
 // to the server's view_access later).
diff --git a/webapp/tests/react_testing_utils.tsx b/webapp/tests/react_testing_utils.tsx
index 06ddcad..2ceb45c 100644
--- a/webapp/tests/react_testing_utils.tsx
+++ b/webapp/tests/react_testing_utils.tsx
@@ -22,6 +22,7 @@ const EMPTY_DOCS_STATE: DocsPluginState = {
     spacesInTeam: {},
     pages: {},
     pagesInSpace: {},
+    spaceMembers: {},
 };
 
 type TestTeam = {id: string; name: string; display_name?: string};

From 446989d4ec64fff0554c49d576c7ae3a6eab9fc6 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 19:16:17 -0500
Subject: [PATCH 09/68] feat(docs): member avatars, Share modal, design-system
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Space view build-out plus a raw-<button> cleanup.

- buttons: replace the raw <button>s in the space title/page bars with the
  shared Button — icon buttons use emphasis="quaternary" + the compass
  `btn-icon` class (the core pattern), Edit uses SecondaryButton
- avatars: expose the host Avatar via webapp_globals (as a wrapper that
  no-ops when the host doesn't publish it, so callers need no null check);
  useSpaceMemberProfiles resolves member ids to profiles (fetching missing
  ones); MemberAvatars renders the overlapping stack + "+N" in the hero
- share: ShareSpaceModal — real member list with avatars/names and a
  functional Copy link; the add-people search, per-member role, and space
  visibility/access are scaffolding (capabilities + view_access land with
  PR #10). Wired to the title-bar Share button.
---
 webapp/i18n/en.json                           |  10 +
 .../share_space_modal.module.scss             |  96 ++++++++++
 .../share_space_modal/share_space_modal.tsx   | 173 ++++++++++++++++++
 .../space_view/member_avatars.module.scss     |  30 +++
 .../components/space_view/member_avatars.tsx  |  54 ++++++
 .../space_view/page_bar.module.scss           |  50 +----
 webapp/src/components/space_view/page_bar.tsx |  38 ++--
 .../space_view/page_hero.module.scss          |   4 +
 .../src/components/space_view/page_hero.tsx   |   6 +-
 .../space_view/space_title_bar.module.scss    |  36 +---
 .../components/space_view/space_title_bar.tsx |  56 ++++--
 webapp/src/hooks/members.ts                   |  46 +++++
 webapp/src/webapp_globals.ts                  |  26 ++-
 13 files changed, 511 insertions(+), 114 deletions(-)
 create mode 100644 webapp/src/components/share_space_modal/share_space_modal.module.scss
 create mode 100644 webapp/src/components/share_space_modal/share_space_modal.tsx
 create mode 100644 webapp/src/components/space_view/member_avatars.module.scss
 create mode 100644 webapp/src/components/space_view/member_avatars.tsx
 create mode 100644 webapp/src/hooks/members.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 417a6a4..85cc6dc 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -48,6 +48,15 @@
   "docs.leaveSpace.confirm": "Yes, leave space",
   "docs.leaveSpace.message": "Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.",
   "docs.leaveSpace.title": "Leave {name}",
+  "docs.share.access.canView": "Can View",
+  "docs.share.copyLink": "Copy link",
+  "docs.share.handle": "@{username}",
+  "docs.share.role.admin": "Admin",
+  "docs.share.search": "Add people or groups",
+  "docs.share.title": "Share space",
+  "docs.share.visibility.public": "Public",
+  "docs.share.visibility.publicHint": "Anyone in Mattermost",
+  "docs.share.you": "(You)",
   "docs.sidebar.add.browse": "Browse spaces",
   "docs.sidebar.add.create": "Create a space",
   "docs.sidebar.add.menu": "Add or browse spaces",
@@ -75,6 +84,7 @@
   "docs.space.edit": "Edit",
   "docs.space.expand": "Expand",
   "docs.space.favorite": "Favorite this space",
+  "docs.space.membersOverflow": "+{count}",
   "docs.space.menu": "Space options",
   "docs.space.more": "More actions",
   "docs.space.pages": "Pages",
diff --git a/webapp/src/components/share_space_modal/share_space_modal.module.scss b/webapp/src/components/share_space_modal/share_space_modal.module.scss
new file mode 100644
index 0000000..9c68e48
--- /dev/null
+++ b/webapp/src/components/share_space_modal/share_space_modal.module.scss
@@ -0,0 +1,96 @@
+.modal {
+    width: 640px;
+    max-width: calc(100vw - 32px);
+}
+
+.titleBar {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.copyLink {
+    gap: 6px;
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 20px 24px 8px;
+}
+
+.memberList {
+    display: flex;
+    flex-direction: column;
+}
+
+.memberRow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 0;
+}
+
+.memberInfo {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: baseline;
+    gap: 6px;
+}
+
+.memberName {
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.memberUsername,
+.you {
+    overflow: hidden;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.roleTrigger {
+    gap: 4px;
+    color: var(--link-color);
+    font-weight: 600;
+}
+
+.access {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.accessLeft {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+}
+
+.accessTrigger {
+    gap: 4px;
+    font-weight: 600;
+}
+
+.accessHint {
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 14px;
+}
+
+.canView {
+    gap: 4px;
+    color: var(--link-color);
+    font-weight: 600;
+}
diff --git a/webapp/src/components/share_space_modal/share_space_modal.tsx b/webapp/src/components/share_space_modal/share_space_modal.tsx
new file mode 100644
index 0000000..1626006
--- /dev/null
+++ b/webapp/src/components/share_space_modal/share_space_modal.tsx
@@ -0,0 +1,173 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useSpaceMemberProfiles} from 'hooks/members';
+import {useDocsNavigation} from 'hooks/navigation';
+import {useAppSelector} from 'hooks/redux';
+import React, {useState} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {copyToClipboard} from 'utils/clipboard';
+import {Avatar} from 'webapp_globals';
+
+import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
+import ContentCopyIcon from '@mattermost/compass-icons/components/content-copy';
+import GlobeIcon from '@mattermost/compass-icons/components/globe';
+import MagnifyIcon from '@mattermost/compass-icons/components/magnify';
+
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+
+import {Button, SecondaryButton} from 'components/form-controls/button';
+import TextInput from 'components/form-controls/text_input';
+import GenericModal from 'components/generic_modal/generic_modal';
+
+import type {Space} from 'types/docs';
+
+import styles from './share_space_modal.module.scss';
+
+type Props = {
+    space: Space;
+    onClose: () => void;
+};
+
+// Members come from the real member API; roles and space visibility (Admin /
+// Public / Can View) are capability/view-access features from PR #10, so those
+// dropdowns and the add-people search are visual scaffolding for now. Copy link
+// is functional.
+const ShareSpaceModal = ({space, onClose}: Props) => {
+    const {formatMessage} = useIntl();
+    const {paths} = useDocsNavigation();
+    const members = useSpaceMemberProfiles(space.id);
+    const currentUserId = useAppSelector(getCurrentUserId);
+
+    const [query, setQuery] = useState('');
+
+    const copyLink = () => copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
+
+    const title = (
+        <span className={styles.titleBar}>
+            <FormattedMessage
+                id='docs.share.title'
+                defaultMessage='Share space'
+            />
+            <SecondaryButton
+                type='button'
+                size='sm'
+                className={styles.copyLink}
+                onClick={copyLink}
+            >
+                <ContentCopyIcon size={16}/>
+                <FormattedMessage
+                    id='docs.share.copyLink'
+                    defaultMessage='Copy link'
+                />
+            </SecondaryButton>
+        </span>
+    );
+
+    const footer = (
+        <div className={styles.access}>
+            <div className={styles.accessLeft}>
+                <GlobeIcon size={20}/>
+                <Button
+                    type='button'
+                    emphasis='quaternary'
+                    size='sm'
+                    className={styles.accessTrigger}
+                >
+                    <FormattedMessage
+                        id='docs.share.visibility.public'
+                        defaultMessage='Public'
+                    />
+                    <ChevronDownIcon size={16}/>
+                </Button>
+                <span className={styles.accessHint}>
+                    <FormattedMessage
+                        id='docs.share.visibility.publicHint'
+                        defaultMessage='Anyone in Mattermost'
+                    />
+                </span>
+            </div>
+            <Button
+                type='button'
+                emphasis='quaternary'
+                size='sm'
+                className={styles.canView}
+            >
+                <FormattedMessage
+                    id='docs.share.access.canView'
+                    defaultMessage='Can View'
+                />
+                <ChevronDownIcon size={16}/>
+            </Button>
+        </div>
+    );
+
+    return (
+        <GenericModal
+            className={styles.modal}
+            title={title}
+            ariaLabel={formatMessage({id: 'docs.share.title', defaultMessage: 'Share space'})}
+            onClose={onClose}
+            footer={footer}
+        >
+            <div className={styles.body}>
+                <TextInput
+                    id='docs-share-search'
+                    label={formatMessage({id: 'docs.share.search', defaultMessage: 'Add people or groups'})}
+                    value={query}
+                    onChange={setQuery}
+                    leading={<MagnifyIcon size={16}/>}
+                />
+                <div className={styles.memberList}>
+                    {members.map((member) => (
+                        <div
+                            key={member.id}
+                            className={styles.memberRow}
+                        >
+                            <Avatar
+                                url={member.avatarUrl}
+                                username={member.username}
+                                size='md'
+                                name=''
+                            />
+                            <span className={styles.memberInfo}>
+                                <span className={styles.memberName}>{member.displayName}</span>
+                                {member.username && (
+                                    <span className={styles.memberUsername}>
+                                        <FormattedMessage
+                                            id='docs.share.handle'
+                                            defaultMessage='@{username}'
+                                            values={{username: member.username}}
+                                        />
+                                    </span>
+                                )}
+                                {member.id === currentUserId && (
+                                    <span className={styles.you}>
+                                        <FormattedMessage
+                                            id='docs.share.you'
+                                            defaultMessage='(You)'
+                                        />
+                                    </span>
+                                )}
+                            </span>
+                            <Button
+                                type='button'
+                                emphasis='quaternary'
+                                size='sm'
+                                className={styles.roleTrigger}
+                            >
+                                <FormattedMessage
+                                    id='docs.share.role.admin'
+                                    defaultMessage='Admin'
+                                />
+                                <ChevronDownIcon size={16}/>
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </GenericModal>
+    );
+};
+
+export default ShareSpaceModal;
diff --git a/webapp/src/components/space_view/member_avatars.module.scss b/webapp/src/components/space_view/member_avatars.module.scss
new file mode 100644
index 0000000..07195ac
--- /dev/null
+++ b/webapp/src/components/space_view/member_avatars.module.scss
@@ -0,0 +1,30 @@
+.stack {
+    display: flex;
+    align-items: center;
+}
+
+.avatar {
+    display: inline-flex;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px var(--center-channel-bg);
+
+    &:not(:first-child) {
+        margin-left: -8px;
+    }
+}
+
+.overflow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    margin-left: -8px;
+    padding: 0 6px;
+    border-radius: 12px;
+    background: rgba(var(--center-channel-color-rgb), 0.08);
+    box-shadow: 0 0 0 2px var(--center-channel-bg);
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+    font-size: 11px;
+    font-weight: 600;
+}
diff --git a/webapp/src/components/space_view/member_avatars.tsx b/webapp/src/components/space_view/member_avatars.tsx
new file mode 100644
index 0000000..5130162
--- /dev/null
+++ b/webapp/src/components/space_view/member_avatars.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useSpaceMemberProfiles} from 'hooks/members';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Avatar} from 'webapp_globals';
+
+import styles from './member_avatars.module.scss';
+
+const MAX_SHOWN = 3;
+
+// Overlapping avatar stack for a space's members, with a "+N" overflow. Renders
+// nothing when there are no members (Avatar itself no-ops on hosts without it).
+const MemberAvatars = ({spaceId}: {spaceId: string}) => {
+    const members = useSpaceMemberProfiles(spaceId);
+
+    if (members.length === 0) {
+        return null;
+    }
+
+    const shown = members.slice(0, MAX_SHOWN);
+    const overflow = members.length - shown.length;
+
+    return (
+        <div className={styles.stack}>
+            {shown.map((member) => (
+                <span
+                    key={member.id}
+                    className={styles.avatar}
+                    title={member.displayName}
+                >
+                    <Avatar
+                        url={member.avatarUrl}
+                        username={member.username}
+                        size='sm'
+                        name=''
+                    />
+                </span>
+            ))}
+            {overflow > 0 && (
+                <span className={styles.overflow}>
+                    <FormattedMessage
+                        id='docs.space.membersOverflow'
+                        defaultMessage='+{count}'
+                        values={{count: overflow}}
+                    />
+                </span>
+            )}
+        </div>
+    );
+};
+
+export default MemberAvatars;
diff --git a/webapp/src/components/space_view/page_bar.module.scss b/webapp/src/components/space_view/page_bar.module.scss
index bff1bec..135647c 100644
--- a/webapp/src/components/space_view/page_bar.module.scss
+++ b/webapp/src/components/space_view/page_bar.module.scss
@@ -19,23 +19,11 @@
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    gap: 2px;
+    gap: 4px;
 }
 
 .pagesToggle {
-    display: flex;
-    align-items: center;
     gap: 8px;
-    padding: 4px 8px;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: rgba(var(--center-channel-color-rgb), 0.72);
-    cursor: pointer;
-
-    &:hover {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-    }
 }
 
 .pagesLabel {
@@ -45,30 +33,14 @@
 }
 
 .updated {
-    margin-right: 8px;
+    margin-right: 4px;
     color: rgba(var(--center-channel-color-rgb), 0.56);
     font-size: 12px;
     white-space: nowrap;
 }
 
-.iconButton {
+.commentButton {
     position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: rgba(var(--center-channel-color-rgb), 0.64);
-    cursor: pointer;
-
-    &:hover {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.72);
-    }
 }
 
 .badge {
@@ -83,21 +55,5 @@
 }
 
 .edit {
-    display: flex;
-    align-items: center;
     gap: 6px;
-    height: 28px;
-    margin: 0 4px;
-    padding: 0 12px;
-    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-    border-radius: 4px;
-    background: transparent;
-    color: var(--center-channel-color);
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:hover {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-    }
 }
diff --git a/webapp/src/components/space_view/page_bar.tsx b/webapp/src/components/space_view/page_bar.tsx
index f3080a5..16e423a 100644
--- a/webapp/src/components/space_view/page_bar.tsx
+++ b/webapp/src/components/space_view/page_bar.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {Timestamp} from 'webapp_globals';
@@ -12,6 +13,8 @@ import FormatListBulletedIcon from '@mattermost/compass-icons/components/format-
 import MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';
 import PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';
 
+import {Button, SecondaryButton} from 'components/form-controls/button';
+
 import type {Space} from 'types/docs';
 
 import styles from './page_bar.module.scss';
@@ -50,8 +53,10 @@ const PageBar = ({space}: {space: Space}) => {
     return (
         <div className={styles.bar}>
             <div className={styles.left}>
-                <button
+                <Button
                     type='button'
+                    emphasis='quaternary'
+                    size='sm'
                     className={styles.pagesToggle}
                     aria-label={pagesLabel}
                 >
@@ -62,7 +67,7 @@ const PageBar = ({space}: {space: Space}) => {
                             defaultMessage='Pages'
                         />
                     </span>
-                </button>
+                </Button>
             </div>
 
             <div className={styles.right}>
@@ -75,16 +80,19 @@ const PageBar = ({space}: {space: Space}) => {
                         />
                     </span>
                 )}
-                <button
+                <Button
                     type='button'
-                    className={styles.iconButton}
+                    emphasis='quaternary'
+                    size='sm'
+                    className={classNames('btn-icon', styles.commentButton)}
                     aria-label={commentsLabel}
                 >
                     <MessageTextOutlineIcon size={18}/>
                     <span className={styles.badge}/>
-                </button>
-                <button
+                </Button>
+                <SecondaryButton
                     type='button'
+                    size='sm'
                     className={styles.edit}
                 >
                     <PencilOutlineIcon size={14}/>
@@ -92,21 +100,25 @@ const PageBar = ({space}: {space: Space}) => {
                         id='docs.space.edit'
                         defaultMessage='Edit'
                     />
-                </button>
-                <button
+                </SecondaryButton>
+                <Button
                     type='button'
-                    className={styles.iconButton}
+                    emphasis='quaternary'
+                    size='sm'
+                    className='btn-icon'
                     aria-label={moreLabel}
                 >
                     <DotsHorizontalIcon size={18}/>
-                </button>
-                <button
+                </Button>
+                <Button
                     type='button'
-                    className={styles.iconButton}
+                    emphasis='quaternary'
+                    size='sm'
+                    className='btn-icon'
                     aria-label={expandLabel}
                 >
                     <ArrowExpandIcon size={16}/>
-                </button>
+                </Button>
             </div>
         </div>
     );
diff --git a/webapp/src/components/space_view/page_hero.module.scss b/webapp/src/components/space_view/page_hero.module.scss
index 2209304..5454999 100644
--- a/webapp/src/components/space_view/page_hero.module.scss
+++ b/webapp/src/components/space_view/page_hero.module.scss
@@ -65,6 +65,10 @@
     border-right: none;
 }
 
+.avatars {
+    margin-left: auto;
+}
+
 .statValue {
     color: var(--center-channel-color);
     font-size: 20px;
diff --git a/webapp/src/components/space_view/page_hero.tsx b/webapp/src/components/space_view/page_hero.tsx
index 5db3d7a..8699b4c 100644
--- a/webapp/src/components/space_view/page_hero.tsx
+++ b/webapp/src/components/space_view/page_hero.tsx
@@ -8,6 +8,7 @@ import {SpaceIcon} from 'utils/space_icon';
 
 import type {Space} from 'types/docs';
 
+import MemberAvatars from './member_avatars';
 import styles from './page_hero.module.scss';
 
 type Stat = {
@@ -63,11 +64,14 @@ const PageHero = ({space, pageCount, memberCount}: Props) => {
                         key={stat.key}
                         className={styles.stat}
                     >
-                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- em dash placeholder until counts are wired */}
+                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx -- em dash placeholder for the view count, which has no server source yet */}
                         <span className={styles.statValue}>{stat.value ?? '—'}</span>
                         <span className={styles.statLabel}>{stat.label}</span>
                     </div>
                 ))}
+                <div className={styles.avatars}>
+                    <MemberAvatars spaceId={space.id}/>
+                </div>
             </div>
         </section>
     );
diff --git a/webapp/src/components/space_view/space_title_bar.module.scss b/webapp/src/components/space_view/space_title_bar.module.scss
index be6f50f..fd0ecd7 100644
--- a/webapp/src/components/space_view/space_title_bar.module.scss
+++ b/webapp/src/components/space_view/space_title_bar.module.scss
@@ -13,7 +13,7 @@
     flex: 1 1 auto;
     min-width: 0;
     align-items: center;
-    gap: 8px;
+    gap: 4px;
 }
 
 .right {
@@ -24,19 +24,11 @@
 }
 
 .titleTrigger {
-    display: flex;
+    display: inline-flex;
     min-width: 0;
+    max-width: 280px;
     align-items: center;
     gap: 6px;
-    padding: 4px 6px;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    cursor: pointer;
-
-    &:hover {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-    }
 }
 
 .emoji {
@@ -67,32 +59,14 @@
     display: flex;
     align-items: center;
     gap: 4px;
+    margin-left: 4px;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     font-size: 12px;
     font-weight: 600;
 }
 
-.iconButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: rgba(var(--center-channel-color-rgb), 0.64);
-    cursor: pointer;
-
-    &:hover {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.72);
-    }
-}
-
 .share {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 6px;
 }
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_title_bar.tsx
index 4d056e3..8fb4d85 100644
--- a/webapp/src/components/space_view/space_title_bar.tsx
+++ b/webapp/src/components/space_view/space_title_bar.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
 
@@ -11,16 +11,19 @@ import InformationOutlineIcon from '@mattermost/compass-icons/components/informa
 import ShareVariantOutlineIcon from '@mattermost/compass-icons/components/share-variant-outline';
 import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
 
-import {PrimaryButton} from 'components/form-controls/button';
+import {Button, PrimaryButton} from 'components/form-controls/button';
+import ShareSpaceModal from 'components/share_space_modal/share_space_modal';
 
 import type {Space} from 'types/docs';
 
 import styles from './space_title_bar.module.scss';
 
 // The controls here (favorite, space menu, details, share) are visual
-// scaffolding — wired in later passes.
+// scaffolding — wired in later passes. Icon buttons use the shared Button with
+// the compass `btn-icon` treatment (quaternary + square), the same as core.
 const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}) => {
     const {formatMessage} = useIntl();
+    const [shareOpen, setShareOpen] = useState(false);
 
     const favoriteLabel = formatMessage({id: 'docs.space.favorite', defaultMessage: 'Favorite this space'});
     const menuLabel = formatMessage({id: 'docs.space.menu', defaultMessage: 'Space options'});
@@ -29,15 +32,19 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
     return (
         <div className={styles.bar}>
             <div className={styles.left}>
-                <button
+                <Button
                     type='button'
-                    className={styles.iconButton}
+                    emphasis='quaternary'
+                    size='sm'
+                    className='btn-icon'
                     aria-label={favoriteLabel}
                 >
                     <StarOutlineIcon size={18}/>
-                </button>
-                <button
+                </Button>
+                <Button
                     type='button'
+                    emphasis='quaternary'
+                    size='sm'
                     className={styles.titleTrigger}
                     aria-label={menuLabel}
                 >
@@ -55,7 +62,7 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
                         className={styles.chevron}
                         size={16}
                     />
-                </button>
+                </Button>
                 <span className={styles.members}>
                     <AccountMultipleOutlineIcon size={16}/>
                     <span>{memberCount}</span>
@@ -63,23 +70,34 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
             </div>
 
             <div className={styles.right}>
-                <button
+                <Button
                     type='button'
-                    className={styles.iconButton}
+                    emphasis='quaternary'
+                    size='sm'
+                    className='btn-icon'
                     aria-label={detailsLabel}
                 >
                     <InformationOutlineIcon size={18}/>
-                </button>
-                <PrimaryButton type='button'>
-                    <span className={styles.share}>
-                        <ShareVariantOutlineIcon size={16}/>
-                        <FormattedMessage
-                            id='docs.space.share'
-                            defaultMessage='Share'
-                        />
-                    </span>
+                </Button>
+                <PrimaryButton
+                    type='button'
+                    size='sm'
+                    className={styles.share}
+                    onClick={() => setShareOpen(true)}
+                >
+                    <ShareVariantOutlineIcon size={16}/>
+                    <FormattedMessage
+                        id='docs.space.share'
+                        defaultMessage='Share'
+                    />
                 </PrimaryButton>
             </div>
+            {shareOpen && (
+                <ShareSpaceModal
+                    space={space}
+                    onClose={() => setShareOpen(false)}
+                />
+            )}
         </div>
     );
 };
diff --git a/webapp/src/hooks/members.ts b/webapp/src/hooks/members.ts
new file mode 100644
index 0000000..0d0d96f
--- /dev/null
+++ b/webapp/src/hooks/members.ts
@@ -0,0 +1,46 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useAppDispatch, useAppSelector} from 'hooks/redux';
+import {useEffect, useMemo} from 'react';
+
+import {getMissingProfilesByIds} from 'mattermost-redux/actions/users';
+import {Client4} from 'mattermost-redux/client';
+import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
+import {getUsers} from 'mattermost-redux/selectors/entities/users';
+import {displayUsername} from 'mattermost-redux/utils/user_utils';
+
+import {getSpaceMemberIds} from 'store/selectors';
+
+export type MemberProfile = {
+    id: string;
+    displayName: string;
+    username: string;
+    avatarUrl: string;
+};
+
+// Resolves a space's member ids (from the Docs store) to display profiles,
+// fetching any not yet in the host store. Member ids are loaded by
+// fetchSpaceMembers (see useSpaceStats).
+export function useSpaceMemberProfiles(spaceId: string): MemberProfile[] {
+    const dispatch = useAppDispatch();
+    const memberIds = useAppSelector((state) => getSpaceMemberIds(state, spaceId));
+    const usersById = useAppSelector(getUsers);
+    const nameDisplay = useAppSelector(getTeammateNameDisplaySetting) || '';
+
+    useEffect(() => {
+        if (memberIds.length) {
+            dispatch(getMissingProfilesByIds(memberIds));
+        }
+    }, [dispatch, memberIds]);
+
+    return useMemo(() => memberIds.map((id) => {
+        const user = usersById[id];
+        return {
+            id,
+            displayName: displayUsername(user, nameDisplay),
+            username: user?.username ?? '',
+            avatarUrl: Client4.getProfilePictureUrl(id, user?.last_picture_update),
+        };
+    }), [memberIds, usersById, nameDisplay]);
+}
diff --git a/webapp/src/webapp_globals.ts b/webapp/src/webapp_globals.ts
index c4970fb..8ec2aa5 100644
--- a/webapp/src/webapp_globals.ts
+++ b/webapp/src/webapp_globals.ts
@@ -2,7 +2,8 @@
 // See LICENSE.txt for license information.
 
 import type {History} from 'history';
-import type {ComponentType, ReactNode} from 'react';
+import React from 'react';
+import type {ComponentType, ReactElement, ReactNode} from 'react';
 import type {Action} from 'redux';
 
 // Hand-typed view of the API the host web app attaches to `window` for plugins
@@ -52,17 +53,36 @@ type TimestampProps = {
     children?: ReactNode;
 };
 
+export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+// Mirrors core's Avatar props (widgets/users/avatar). `name` is set to '' when a
+// visible label already accompanies the avatar, so screen readers don't repeat it.
+type AvatarProps = {
+    url?: string;
+    username?: string;
+    size?: AvatarSize;
+    name?: string;
+};
+
 // Core exposes shared React components to plugins on `window.Components`
-// (core's plugins/export.ts). Timestamp renders localized, timezone-aware
-// relative/absolute times so plugins don't hand-roll date formatting.
+// (core's plugins/export.ts). Timestamp renders localized times; Avatar renders
+// a user's profile picture with the host's sizing/fallback.
 type HostComponents = {
     Timestamp?: ComponentType<TimestampProps>;
+    Avatar?: ComponentType<AvatarProps>;
 };
 
 const hostComponents = (): HostComponents => (window as unknown as {Components?: HostComponents}).Components ?? {};
 
 export const Timestamp = hostComponents().Timestamp;
 
+// Renders the host Avatar, or nothing on a host that doesn't publish it. The
+// fallback lives here so callers just render <Avatar/> without a null check.
+export const Avatar = (props: AvatarProps): ReactElement | null => {
+    const HostAvatar = hostComponents().Avatar;
+    return HostAvatar ? React.createElement(HostAvatar, props) : null;
+};
+
 export function getBrowserHistory(): History | undefined {
     return webappUtils().browserHistory;
 }

From 0bed4731db868ef6d031af264798e8ea8ed2b2f7 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 19:43:15 -0500
Subject: [PATCH 10/68] feat(docs): nested, collapsible, drag-and-drop page
 tree
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the space page-tree panel (Figma) as a middle column in the space
view, backed by the real page + move APIs.

- store: buildPageTree (parent_id/sort_order, orphans as roots) +
  buildDescendantMap; reindexAfterMove (0-based sibling renumber mirroring
  the server) + MOVED_PAGE; movePage thunk (optimistic move, reconcile on
  success, re-fetch on failure) and createPage thunk
- data: DocsDataSource.movePage (PATCH .../move) and createPage (POST);
  restPatch
- collapse: per-user localStorage tracker (data/collapsed_pages) +
  useCollapsedPages, mirroring the recent-spaces seam
- ui: PageTreePanel (264px column: Pages header, add-page, tree) and the
  recursive PageTreeNode (disclosure chevron, page/folder glyph, indent,
  active highlight, navigate/collapse)
- dnd: pragmatic-drag-and-drop reused from spaces_sidebar — a 3-zone
  hitbox (reorder above/below, reparent onto center), descendant-drop
  guard, and a monitor resolving the drop into (parent_id, sibling_index)
- layout: space view is now the title bar over [tree panel][content
  column]; the page-bar Pages button toggles the panel
- tests: buildPageTree/descendants and reindexAfterMove/MOVED_PAGE

Design's role/visibility remain PR #10 scaffolding; the page body is still
a placeholder until the editor is mounted.
---
 webapp/i18n/en.json                           |   5 +
 webapp/src/client/rest.ts                     |   3 +
 webapp/src/components/space_view/page_bar.tsx |  14 +-
 .../space_view/page_tree/dnd/types.ts         |  17 +++
 .../page_tree/dnd/use_page_drag_drop.ts       |  69 ++++++++++
 .../space_view/page_tree/dnd/use_pages_dnd.ts |  79 ++++++++++++
 .../page_tree/page_tree_node.module.scss      |  77 +++++++++++
 .../space_view/page_tree/page_tree_node.tsx   | 122 ++++++++++++++++++
 .../page_tree/page_tree_panel.module.scss     |  43 ++++++
 .../space_view/page_tree/page_tree_panel.tsx  | 106 +++++++++++++++
 .../space_view/space_view.module.scss         |  15 ++-
 .../src/components/space_view/space_view.tsx  |  43 +++---
 webapp/src/data/api_data_source.ts            |  21 ++-
 webapp/src/data/collapsed_pages.ts            |  49 +++++++
 webapp/src/data/docs_data_source.ts           |  12 +-
 webapp/src/hooks/page_tree.ts                 |  26 ++++
 webapp/src/store/action_types.ts              |   1 +
 webapp/src/store/actions.ts                   |  38 +++++-
 webapp/src/store/page_tree.test.ts            |  53 ++++++++
 webapp/src/store/page_tree.ts                 |  62 +++++++++
 webapp/src/store/reducer.test.ts              |  64 ++++++++-
 webapp/src/store/reducer.ts                   |  49 +++++++
 webapp/src/types/docs.ts                      |   7 +
 23 files changed, 951 insertions(+), 24 deletions(-)
 create mode 100644 webapp/src/components/space_view/page_tree/dnd/types.ts
 create mode 100644 webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
 create mode 100644 webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
 create mode 100644 webapp/src/components/space_view/page_tree/page_tree_node.module.scss
 create mode 100644 webapp/src/components/space_view/page_tree/page_tree_node.tsx
 create mode 100644 webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
 create mode 100644 webapp/src/components/space_view/page_tree/page_tree_panel.tsx
 create mode 100644 webapp/src/data/collapsed_pages.ts
 create mode 100644 webapp/src/hooks/page_tree.ts
 create mode 100644 webapp/src/store/page_tree.test.ts
 create mode 100644 webapp/src/store/page_tree.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 85cc6dc..68e1a67 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -48,6 +48,11 @@
   "docs.leaveSpace.confirm": "Yes, leave space",
   "docs.leaveSpace.message": "Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.",
   "docs.leaveSpace.title": "Leave {name}",
+  "docs.pageTree.add": "Add page",
+  "docs.pageTree.collapse": "Collapse {title}",
+  "docs.pageTree.expand": "Expand {title}",
+  "docs.pageTree.heading": "Pages",
+  "docs.pageTree.untitled": "Untitled",
   "docs.share.access.canView": "Can View",
   "docs.share.copyLink": "Copy link",
   "docs.share.handle": "@{username}",
diff --git a/webapp/src/client/rest.ts b/webapp/src/client/rest.ts
index 3d45024..cc68f65 100644
--- a/webapp/src/client/rest.ts
+++ b/webapp/src/client/rest.ts
@@ -49,6 +49,9 @@ export const restGet = <T>(url: string): Promise<T> => doFetch<T>(url, {method:
 export const restPost = <T>(url: string, body: unknown): Promise<T> =>
     doFetch<T>(url, {method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}});
 
+export const restPatch = <T>(url: string, body: unknown): Promise<T> =>
+    doFetch<T>(url, {method: 'PATCH', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}});
+
 export const restDelete = <T>(url: string): Promise<T> => doFetch<T>(url, {method: 'DELETE'});
 
 type Paginated<T> = {
diff --git a/webapp/src/components/space_view/page_bar.tsx b/webapp/src/components/space_view/page_bar.tsx
index 16e423a..60ec856 100644
--- a/webapp/src/components/space_view/page_bar.tsx
+++ b/webapp/src/components/space_view/page_bar.tsx
@@ -28,9 +28,15 @@ const UPDATED_TIME_SPEC: TimestampUnit[] = [
     'year',
 ];
 
-// Controls (pages toggle, comments, edit, overflow, expand) are visual
-// scaffolding wired in later passes.
-const PageBar = ({space}: {space: Space}) => {
+type Props = {
+    space: Space;
+    treeOpen: boolean;
+    onTogglePages: () => void;
+};
+
+// Controls (comments, edit, overflow, expand) are visual scaffolding wired in
+// later passes; the pages toggle drives the page tree panel.
+const PageBar = ({space, treeOpen, onTogglePages}: Props) => {
     const {formatMessage} = useIntl();
 
     const pagesLabel = formatMessage({id: 'docs.space.pages.toggle', defaultMessage: 'Toggle page tree'});
@@ -59,6 +65,8 @@ const PageBar = ({space}: {space: Space}) => {
                     size='sm'
                     className={styles.pagesToggle}
                     aria-label={pagesLabel}
+                    aria-pressed={treeOpen}
+                    onClick={onTogglePages}
                 >
                     <FormatListBulletedIcon size={18}/>
                     <span className={styles.pagesLabel}>
diff --git a/webapp/src/components/space_view/page_tree/dnd/types.ts b/webapp/src/components/space_view/page_tree/dnd/types.ts
new file mode 100644
index 0000000..eae77b5
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/dnd/types.ts
@@ -0,0 +1,17 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {Edge} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+
+export const PAGE_DRAG_TYPE = 'docs-page';
+
+// Where a drop lands relative to the target row: 'reorder' (above/below a
+// sibling, via `edge`) or 'reparent' (onto the row's center → become its child).
+export type PageDropTarget =
+    | {mode: 'reorder'; edge: Edge}
+    | {mode: 'reparent'};
+
+export type PageDragData = {
+    type: typeof PAGE_DRAG_TYPE;
+    pageId: string;
+};
diff --git a/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts b/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
new file mode 100644
index 0000000..5e934de
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
@@ -0,0 +1,69 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {combine} from '@atlaskit/pragmatic-drag-and-drop/combine';
+import {draggable, dropTargetForElements} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {useLatest} from 'hooks/utils';
+import {useEffect, useState} from 'react';
+
+import {PAGE_DRAG_TYPE, type PageDropTarget} from './types';
+
+type Args = {
+    pageId: string;
+    element: HTMLElement | null;
+
+    // True when `sourcePageId` is allowed to drop on this row (guards against
+    // dropping a page into its own subtree). Read at drop time via a ref, so a
+    // changing predicate doesn't re-register the drag listeners.
+    canDrop: (sourcePageId: string) => boolean;
+    enabled: boolean;
+};
+
+// A row's vertical hitbox: the top and bottom quarters reorder above/below the
+// row; the middle half reparents (drop onto center → become a child).
+const REORDER_BAND = 0.25;
+
+function computeDropTarget(element: Element, clientY: number): PageDropTarget {
+    const rect = element.getBoundingClientRect();
+    const ratio = (clientY - rect.top) / rect.height;
+    if (ratio <= REORDER_BAND) {
+        return {mode: 'reorder', edge: 'top'};
+    }
+    if (ratio >= 1 - REORDER_BAND) {
+        return {mode: 'reorder', edge: 'bottom'};
+    }
+    return {mode: 'reparent'};
+}
+
+export function usePageDragDrop({pageId, element, canDrop, enabled}: Args) {
+    const [dragging, setDragging] = useState(false);
+    const [dropTarget, setDropTarget] = useState<PageDropTarget | null>(null);
+    const canDropRef = useLatest(canDrop);
+
+    useEffect(() => {
+        if (!element || !enabled) {
+            return undefined;
+        }
+
+        return combine(
+            draggable({
+                element,
+                getInitialData: () => ({type: PAGE_DRAG_TYPE, pageId}),
+                onDragStart: () => setDragging(true),
+                onDrop: () => setDragging(false),
+            }),
+            dropTargetForElements({
+                element,
+                getData: ({input, element: el}) => ({type: PAGE_DRAG_TYPE, pageId, ...computeDropTarget(el, input.clientY)}),
+                canDrop: ({source}) => source.data.type === PAGE_DRAG_TYPE &&
+                    source.data.pageId !== pageId &&
+                    canDropRef.current(source.data.pageId as string),
+                onDrag: ({self}) => setDropTarget({mode: self.data.mode, edge: self.data.edge} as PageDropTarget),
+                onDragLeave: () => setDropTarget(null),
+                onDrop: () => setDropTarget(null),
+            }),
+        );
+    }, [pageId, element, enabled, canDropRef]);
+
+    return {dragging, dropTarget};
+}
diff --git a/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts b/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
new file mode 100644
index 0000000..d125b6c
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
@@ -0,0 +1,79 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {monitorForElements} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {useLatest} from 'hooks/utils';
+import {useEffect} from 'react';
+
+import type {Page} from 'types/docs';
+
+import {PAGE_DRAG_TYPE, type PageDropTarget} from './types';
+
+type MoveArgs = {
+    pageId: string;
+    parentId: string;
+    siblingIndex: number;
+};
+
+type Args = {
+    pages: Page[];
+    onMove: (args: MoveArgs) => void;
+    enabled: boolean;
+};
+
+const bySortOrder = (a: Page, b: Page): number =>
+    a.sort_order - b.sort_order || a.title.localeCompare(b.title);
+
+// Resolves the drop of `sourceId` onto `targetId` into a (parentId, siblingIndex)
+// move. Siblings are computed with the source removed, so the returned index is
+// the final 0-based position the server expects.
+function resolveMove(pages: Page[], sourceId: string, targetId: string, drop: PageDropTarget): MoveArgs | null {
+    const target = pages.find((page) => page.id === targetId);
+    if (!target) {
+        return null;
+    }
+
+    if (drop.mode === 'reparent') {
+        const childCount = pages.filter((page) => page.parent_id === targetId && page.id !== sourceId).length;
+        return {pageId: sourceId, parentId: targetId, siblingIndex: childCount};
+    }
+
+    const parentId = target.parent_id;
+    const siblings = pages.
+        filter((page) => page.parent_id === parentId && page.id !== sourceId).
+        sort(bySortOrder);
+    const targetIndex = siblings.findIndex((page) => page.id === targetId);
+    if (targetIndex === -1) {
+        return null;
+    }
+    const siblingIndex = drop.edge === 'bottom' ? targetIndex + 1 : targetIndex;
+    return {pageId: sourceId, parentId, siblingIndex};
+}
+
+// One monitor for the whole tree: on drop it resolves the source/target pair
+// into a move and hands it to `onMove`. Registered once; live state is read
+// through refs so the listener never re-registers mid-drag.
+export function usePagesDnd({pages, onMove, enabled}: Args) {
+    const pagesRef = useLatest(pages);
+    const onMoveRef = useLatest(onMove);
+    const enabledRef = useLatest(enabled);
+
+    useEffect(() => monitorForElements({
+        canMonitor: ({source}) => enabledRef.current && source.data.type === PAGE_DRAG_TYPE,
+        onDrop: ({source, location}) => {
+            const target = location.current.dropTargets[0];
+            if (!target || target.data.type !== PAGE_DRAG_TYPE) {
+                return;
+            }
+
+            const sourceId = source.data.pageId as string;
+            const targetId = target.data.pageId as string;
+            const drop = {mode: target.data.mode, edge: target.data.edge} as PageDropTarget;
+
+            const move = resolveMove(pagesRef.current, sourceId, targetId, drop);
+            if (move) {
+                onMoveRef.current(move);
+            }
+        },
+    }), [pagesRef, onMoveRef, enabledRef]);
+}
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
new file mode 100644
index 0000000..d6ee120
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
@@ -0,0 +1,77 @@
+.node {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    padding-right: 4px;
+    border-radius: 4px;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+
+    &.active,
+    &.active:hover {
+        background: rgba(var(--button-bg-rgb), 0.08);
+    }
+
+    &.dragging {
+        opacity: 0.4;
+    }
+
+    &.reparent {
+        box-shadow: inset 0 0 0 2px var(--button-bg);
+    }
+}
+
+.chevron {
+    flex-shrink: 0;
+}
+
+.chevronSpacer {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+.label {
+    display: flex;
+    flex: 1 1 0;
+    gap: 6px;
+    align-items: center;
+    min-width: 0;
+    justify-content: flex-start;
+    padding: 4px 6px;
+    font-weight: 400;
+}
+
+.icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.active .icon {
+    color: var(--button-bg);
+}
+
+.title {
+    overflow: hidden;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.children {
+    display: flex;
+    flex-direction: column;
+}
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
new file mode 100644
index 0000000..2af49ff
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -0,0 +1,122 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {DropIndicator} from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import classNames from 'classnames';
+import React, {useState} from 'react';
+import {useIntl} from 'react-intl';
+
+import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
+import ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';
+import FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';
+import FolderOutlineIcon from '@mattermost/compass-icons/components/folder-outline';
+
+import type {PageNode} from 'store/page_tree';
+
+import {Button} from 'components/form-controls/button';
+
+import {usePageDragDrop} from './dnd/use_page_drag_drop';
+import styles from './page_tree_node.module.scss';
+
+const INDENT_STEP = 16;
+
+type Props = {
+    node: PageNode;
+    activePageId?: string;
+    collapsed: Set<string>;
+    descendants: Map<string, Set<string>>;
+    dndEnabled: boolean;
+    onSelect: (pageId: string) => void;
+    onToggle: (pageId: string) => void;
+};
+
+const PageTreeNode = ({node, activePageId, collapsed, descendants, dndEnabled, onSelect, onToggle}: Props) => {
+    const {formatMessage} = useIntl();
+    const [element, setElement] = useState<HTMLDivElement | null>(null);
+    const {page, children, depth} = node;
+    const hasChildren = children.length > 0;
+    const isCollapsed = collapsed.has(page.id);
+
+    const toggleLabel = isCollapsed ?
+        formatMessage({id: 'docs.pageTree.expand', defaultMessage: 'Expand {title}'}, {title: page.title}) :
+        formatMessage({id: 'docs.pageTree.collapse', defaultMessage: 'Collapse {title}'}, {title: page.title});
+
+    const {dragging, dropTarget} = usePageDragDrop({
+        pageId: page.id,
+        element,
+        enabled: dndEnabled,
+        canDrop: (sourceId) => !descendants.get(sourceId)?.has(page.id),
+    });
+
+    const PageGlyph = page.type === 'page_folder' ? FolderOutlineIcon : FileTextOutlineIcon;
+
+    return (
+        <div className={styles.node}>
+            <div
+                ref={setElement}
+                className={classNames(styles.row, {
+                    [styles.active]: page.id === activePageId,
+                    [styles.dragging]: dragging,
+                    [styles.reparent]: dropTarget?.mode === 'reparent',
+                })}
+                style={{paddingInlineStart: depth * INDENT_STEP}}
+            >
+                {hasChildren ? (
+                    <Button
+                        type='button'
+                        emphasis='quaternary'
+                        size='sm'
+                        className={classNames('btn-icon', styles.chevron)}
+                        aria-label={toggleLabel}
+                        aria-expanded={!isCollapsed}
+                        onClick={() => onToggle(page.id)}
+                    >
+                        {isCollapsed ? <ChevronRightIcon size={16}/> : <ChevronDownIcon size={16}/>}
+                    </Button>
+                ) : (
+                    <span className={styles.chevronSpacer}/>
+                )}
+                <Button
+                    type='button'
+                    emphasis='quaternary'
+                    size='sm'
+                    className={styles.label}
+                    title={page.title}
+                    onClick={() => onSelect(page.id)}
+                >
+                    <span
+                        className={styles.icon}
+                        aria-hidden={true}
+                    >
+                        <PageGlyph size={16}/>
+                    </span>
+                    <span className={styles.title}>{page.title}</span>
+                </Button>
+                {dropTarget?.mode === 'reorder' && (
+                    <DropIndicator
+                        edge={dropTarget.edge}
+                        gap='0px'
+                    />
+                )}
+            </div>
+            {hasChildren && !isCollapsed && (
+                <div className={styles.children}>
+                    {children.map((child) => (
+                        <PageTreeNode
+                            key={child.page.id}
+                            node={child}
+                            activePageId={activePageId}
+                            collapsed={collapsed}
+                            descendants={descendants}
+                            dndEnabled={dndEnabled}
+                            onSelect={onSelect}
+                            onToggle={onToggle}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default PageTreeNode;
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
new file mode 100644
index 0000000..2e740c9
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
@@ -0,0 +1,43 @@
+.panel {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 264px;
+    height: 100%;
+    padding: 8px;
+    border-right: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: var(--center-channel-bg);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 32px;
+    padding: 0 4px 0 8px;
+}
+
+.heading {
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+.tree {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    margin-top: 4px;
+    overflow-y: auto;
+}
+
+.addPage {
+    gap: 6px;
+    justify-content: flex-start;
+    margin-top: 4px;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-weight: 400;
+}
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
new file mode 100644
index 0000000..40391f7
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
@@ -0,0 +1,106 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useDocsNavigation} from 'hooks/navigation';
+import {useCollapsedPages} from 'hooks/page_tree';
+import {useAppDispatch, useAppSelector} from 'hooks/redux';
+import React, {useCallback, useMemo} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import PlusIcon from '@mattermost/compass-icons/components/plus';
+
+import {createPage, movePage} from 'store/actions';
+import {buildDescendantMap, buildPageTree} from 'store/page_tree';
+import {getPagesForSpace} from 'store/selectors';
+
+import {Button} from 'components/form-controls/button';
+
+import type {Space} from 'types/docs';
+
+import {usePagesDnd} from './dnd/use_pages_dnd';
+import PageTreeNode from './page_tree_node';
+import styles from './page_tree_panel.module.scss';
+
+const PageTreePanel = ({space}: {space: Space}) => {
+    const {formatMessage} = useIntl();
+    const dispatch = useAppDispatch();
+    const {goToPage, pageId} = useDocsNavigation();
+    const {collapsed, toggle} = useCollapsedPages();
+
+    const pages = useAppSelector((state) => getPagesForSpace(state, space.id));
+    const roots = useMemo(() => buildPageTree(pages), [pages]);
+    const descendants = useMemo(() => buildDescendantMap(roots), [roots]);
+
+    const untitled = formatMessage({id: 'docs.pageTree.untitled', defaultMessage: 'Untitled'});
+    const addLabel = formatMessage({id: 'docs.pageTree.add', defaultMessage: 'Add page'});
+
+    const createRootPage = useCallback(async () => {
+        try {
+            const page = await dispatch(createPage(space.id, {title: untitled}));
+            goToPage(space.id, page.id);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to create page', error);
+        }
+    }, [dispatch, space.id, untitled, goToPage]);
+
+    const onMove = useCallback(({pageId: movedId, parentId, siblingIndex}: {pageId: string; parentId: string; siblingIndex: number}) => {
+        dispatch(movePage(space.id, movedId, parentId, siblingIndex));
+    }, [dispatch, space.id]);
+
+    usePagesDnd({pages, onMove, enabled: pages.length > 0});
+
+    return (
+        <div className={styles.panel}>
+            <div className={styles.header}>
+                <span className={styles.heading}>
+                    <FormattedMessage
+                        id='docs.pageTree.heading'
+                        defaultMessage='Pages'
+                    />
+                </span>
+                <Button
+                    type='button'
+                    emphasis='quaternary'
+                    size='sm'
+                    className='btn-icon'
+                    aria-label={addLabel}
+                    onClick={createRootPage}
+                >
+                    <PlusIcon size={16}/>
+                </Button>
+            </div>
+
+            <div className={styles.tree}>
+                {roots.map((node) => (
+                    <PageTreeNode
+                        key={node.page.id}
+                        node={node}
+                        activePageId={pageId}
+                        collapsed={collapsed}
+                        descendants={descendants}
+                        dndEnabled={true}
+                        onSelect={(id) => goToPage(space.id, id)}
+                        onToggle={toggle}
+                    />
+                ))}
+            </div>
+
+            <Button
+                type='button'
+                emphasis='quaternary'
+                size='sm'
+                className={styles.addPage}
+                onClick={createRootPage}
+            >
+                <PlusIcon size={16}/>
+                <FormattedMessage
+                    id='docs.pageTree.add'
+                    defaultMessage='Add page'
+                />
+            </Button>
+        </div>
+    );
+};
+
+export default PageTreePanel;
diff --git a/webapp/src/components/space_view/space_view.module.scss b/webapp/src/components/space_view/space_view.module.scss
index 014d15e..1c57053 100644
--- a/webapp/src/components/space_view/space_view.module.scss
+++ b/webapp/src/components/space_view/space_view.module.scss
@@ -7,6 +7,19 @@
     background: var(--center-channel-bg);
 }
 
+.body {
+    display: flex;
+    flex: 1 1 0;
+    min-height: 0;
+}
+
+.main {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    min-width: 0;
+}
+
 .scroll {
     flex: 1 1 0;
     overflow-y: auto;
@@ -19,7 +32,7 @@
     padding: 20px 24px;
 }
 
-.body {
+.placeholder {
     padding: 8px 4px 40px;
     color: rgba(var(--center-channel-color-rgb), 0.56);
     font-size: 14px;
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index 6d72666..635e22e 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -2,21 +2,25 @@
 // See LICENSE.txt for license information.
 
 import {useSpaceStats} from 'hooks/spaces';
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import type {Space} from 'types/docs';
 
 import PageBar from './page_bar';
 import PageHero from './page_hero';
+import PageTreePanel from './page_tree/page_tree_panel';
 import SpaceTitleBar from './space_title_bar';
 import styles from './space_view.module.scss';
 
-// Main content for a routed space: the space title bar and page bar over the
-// front-door page (hero). The page body is a placeholder until the editor is
-// mounted (a later pass).
+// Main content for a routed space: the space title bar spans the full width; a
+// flex row holds the page tree panel and the content column (page bar over the
+// front-door hero). The page body is a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
     const {pageCount, memberCount} = useSpaceStats(space.id);
+    const [treeOpen, setTreeOpen] = useState(true);
+
+    const togglePages = useCallback(() => setTreeOpen((open) => !open), []);
 
     return (
         <div className={styles.root}>
@@ -24,19 +28,28 @@ const SpaceView = ({space}: {space: Space}) => {
                 space={space}
                 memberCount={memberCount}
             />
-            <PageBar space={space}/>
-            <div className={styles.scroll}>
-                <div className={styles.content}>
-                    <PageHero
+            <div className={styles.body}>
+                {treeOpen && <PageTreePanel space={space}/>}
+                <div className={styles.main}>
+                    <PageBar
                         space={space}
-                        pageCount={pageCount}
-                        memberCount={memberCount}
+                        treeOpen={treeOpen}
+                        onTogglePages={togglePages}
                     />
-                    <div className={styles.body}>
-                        <FormattedMessage
-                            id='docs.space.bodyPlaceholder'
-                            defaultMessage='Page content will appear here once the editor is available.'
-                        />
+                    <div className={styles.scroll}>
+                        <div className={styles.content}>
+                            <PageHero
+                                space={space}
+                                pageCount={pageCount}
+                                memberCount={memberCount}
+                            />
+                            <div className={styles.placeholder}>
+                                <FormattedMessage
+                                    id='docs.space.bodyPlaceholder'
+                                    defaultMessage='Page content will appear here once the editor is available.'
+                                />
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/webapp/src/data/api_data_source.ts b/webapp/src/data/api_data_source.ts
index 50d0e82..e71b08c 100644
--- a/webapp/src/data/api_data_source.ts
+++ b/webapp/src/data/api_data_source.ts
@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {apiUrl, listAll, restDelete, restGet, restPost} from 'client/rest';
+import {apiUrl, listAll, restDelete, restGet, restPatch, restPost} from 'client/rest';
 
-import type {CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
 
 import type {DocsDataSource} from './docs_data_source';
 
@@ -32,4 +32,21 @@ export const apiDataSource: DocsDataSource = {
         const summaries = await listAll<Page>((query) => `${apiUrl()}/spaces/${spaceId}/pages?${query}`);
         return summaries.map(toPage);
     },
+
+    movePage: async (spaceId, pageId, parentId, siblingIndex, expectedUpdateAt) => {
+        const moved = await restPatch<Page>(`${apiUrl()}/spaces/${spaceId}/pages/${pageId}/move`, {
+            parent_id: parentId,
+            sibling_index: siblingIndex,
+            expected_update_at: expectedUpdateAt,
+        });
+        return toPage(moved);
+    },
+
+    createPage: async (spaceId, input: CreatePageInput) => {
+        const created = await restPost<Page>(`${apiUrl()}/spaces/${spaceId}/pages`, {
+            title: input.title.trim(),
+            parent_id: input.parentId || undefined,
+        });
+        return toPage(created);
+    },
 };
diff --git a/webapp/src/data/collapsed_pages.ts b/webapp/src/data/collapsed_pages.ts
new file mode 100644
index 0000000..e6a6788
--- /dev/null
+++ b/webapp/src/data/collapsed_pages.ts
@@ -0,0 +1,49 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// Client-side "collapsed pages" store for the page tree. Which nodes a user has
+// collapsed is a per-user UI preference with no server model, so it lives in
+// localStorage (mirroring data/recent_spaces). Stored as a flat list of the
+// collapsed page ids.
+
+const KEY_PREFIX = 'docs_collapsed_pages_';
+
+// Per-user so multiple accounts on one browser don't share collapse state.
+const storageKey = (userId: string): string => `${KEY_PREFIX}${userId}`;
+
+const read = (userId: string): string[] => {
+    try {
+        const raw = window.localStorage.getItem(storageKey(userId));
+        return raw ? JSON.parse(raw) as string[] : [];
+    } catch {
+        // Storage unavailable (private mode / quota) or corrupt — treat as empty.
+        return [];
+    }
+};
+
+const write = (userId: string, ids: string[]): void => {
+    try {
+        window.localStorage.setItem(storageKey(userId), JSON.stringify(ids));
+    } catch {
+        // Best-effort; collapse state is non-critical, so a write failure is ignored.
+    }
+};
+
+export function getCollapsed(userId: string): Set<string> {
+    return new Set(read(userId));
+}
+
+export function isCollapsed(userId: string, pageId: string): boolean {
+    return read(userId).includes(pageId);
+}
+
+export function toggleCollapsed(userId: string, pageId: string): Set<string> {
+    const next = getCollapsed(userId);
+    if (next.has(pageId)) {
+        next.delete(pageId);
+    } else {
+        next.add(pageId);
+    }
+    write(userId, [...next]);
+    return next;
+}
diff --git a/webapp/src/data/docs_data_source.ts b/webapp/src/data/docs_data_source.ts
index 8e1632e..474dca5 100644
--- a/webapp/src/data/docs_data_source.ts
+++ b/webapp/src/data/docs_data_source.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
 
 // The seam between the store's thunks and the Docs server REST API. The
 // API-backed source implements this over the plugin's /api/v1 routes; the
@@ -35,4 +35,14 @@ export interface DocsDataSource {
     // Pages in a space. The server returns page summaries (no body); the source
     // normalizes them to Page with an empty body for the store.
     listPages(spaceId: string): Promise<Page[]>;
+
+    // Reparents and/or reorders a page. `parentId` is the new parent id ('' =
+    // space root); `siblingIndex` is the 0-based position within the new parent.
+    // `expectedUpdateAt` is the moved page's current update_at for optimistic
+    // concurrency. Returns the moved page.
+    movePage(spaceId: string, pageId: string, parentId: string, siblingIndex: number, expectedUpdateAt: number): Promise<Page>;
+
+    // Creates a page in a space (optionally under a parent) and returns it (with
+    // its server-assigned id and sort_order).
+    createPage(spaceId: string, input: CreatePageInput): Promise<Page>;
 }
diff --git a/webapp/src/hooks/page_tree.ts b/webapp/src/hooks/page_tree.ts
new file mode 100644
index 0000000..b5690b0
--- /dev/null
+++ b/webapp/src/hooks/page_tree.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {getCollapsed, toggleCollapsed} from 'data/collapsed_pages';
+import {useAppSelector} from 'hooks/redux';
+import {useCallback, useState} from 'react';
+
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+
+type CollapsedPages = {
+    collapsed: Set<string>;
+    toggle: (pageId: string) => void;
+};
+
+// Owns the current user's collapsed-node set for the page tree, backed by
+// localStorage (see data/collapsed_pages). Toggling persists and re-renders.
+export function useCollapsedPages(): CollapsedPages {
+    const userId = useAppSelector(getCurrentUserId);
+    const [collapsed, setCollapsed] = useState<Set<string>>(() => getCollapsed(userId));
+
+    const toggle = useCallback((pageId: string) => {
+        setCollapsed(toggleCollapsed(userId, pageId));
+    }, [userId]);
+
+    return {collapsed, toggle};
+}
diff --git a/webapp/src/store/action_types.ts b/webapp/src/store/action_types.ts
index 6c885e6..cbe8812 100644
--- a/webapp/src/store/action_types.ts
+++ b/webapp/src/store/action_types.ts
@@ -12,4 +12,5 @@ export const SpaceTypes = {
 
 export const PageTypes = {
     RECEIVED_PAGES: manifest.id + '_received_pages',
+    MOVED_PAGE: manifest.id + '_moved_page',
 } as const;
diff --git a/webapp/src/store/actions.ts b/webapp/src/store/actions.ts
index e2f92df..520501a 100644
--- a/webapp/src/store/actions.ts
+++ b/webapp/src/store/actions.ts
@@ -6,10 +6,11 @@ import {docsDataSource} from 'data';
 import {getCurrentTeamId, getMyTeams} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
-import type {CreateSpaceInput, Space} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space} from 'types/docs';
 import type {DocsThunkAction} from 'types/store';
 
 import {PageTypes, SpaceTypes} from './action_types';
+import {getPage} from './selectors';
 
 // Spaces the caller belongs to in the current team (the server scopes the list
 // by backing-channel membership). A failed load leaves the store empty rather
@@ -59,6 +60,41 @@ export function fetchPages(spaceId: string): DocsThunkAction<Promise<void>> {
     };
 }
 
+// Reparents/reorders a page. Optimistically reindexes the store, then reconciles
+// with the server-returned page. On failure it re-fetches the space's pages to
+// restore server truth. siblingIndex is 0-based within the new parent;
+// parentId '' is the space root.
+export function movePage(spaceId: string, pageId: string, parentId: string, siblingIndex: number): DocsThunkAction<Promise<void>> {
+    return async (dispatch, getState) => {
+        const page = getPage(getState(), pageId);
+        if (!page) {
+            return;
+        }
+        const expectedUpdateAt = page.update_at;
+
+        dispatch({type: PageTypes.MOVED_PAGE, pageId, spaceId, parentId, siblingIndex});
+
+        try {
+            const moved = await docsDataSource.movePage(spaceId, pageId, parentId, siblingIndex, expectedUpdateAt);
+            dispatch({type: PageTypes.RECEIVED_PAGES, pages: [moved]});
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to move page', error);
+            dispatch(fetchPages(spaceId));
+        }
+    };
+}
+
+// Creates a page in a space (optionally under a parent) and returns the
+// server-assigned entity (rejects on failure so the caller can surface it).
+export function createPage(spaceId: string, input: CreatePageInput): DocsThunkAction<Promise<Page>> {
+    return async (dispatch) => {
+        const page = await docsDataSource.createPage(spaceId, input);
+        dispatch({type: PageTypes.RECEIVED_PAGES, pages: [page]});
+        return page;
+    };
+}
+
 // Loads a space's members (user ids) into the store, backing the member count.
 export function fetchSpaceMembers(spaceId: string): DocsThunkAction<Promise<void>> {
     return async (dispatch) => {
diff --git a/webapp/src/store/page_tree.test.ts b/webapp/src/store/page_tree.test.ts
new file mode 100644
index 0000000..f9121e1
--- /dev/null
+++ b/webapp/src/store/page_tree.test.ts
@@ -0,0 +1,53 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {buildDescendantMap, buildPageTree} from './page_tree';
+import {makePage} from './test_fixtures';
+
+const child = (id: string, parentId: string, title: string, sortOrder = 0) => ({
+    ...makePage(id, 'space-a', title, sortOrder),
+    parent_id: parentId,
+});
+
+describe('buildPageTree', () => {
+    it('nests children under parents and orders each group by sort_order', () => {
+        const root1 = makePage('r1', 'space-a', 'Root 1', 1);
+        const root2 = makePage('r2', 'space-a', 'Root 2', 0);
+        const c1 = child('c1', 'r1', 'Child 1', 1);
+        const c2 = child('c2', 'r1', 'Child 2', 0);
+        const g1 = child('g1', 'c2', 'Grandchild', 0);
+
+        const tree = buildPageTree([root1, root2, c1, c2, g1]);
+
+        expect(tree.map((node) => node.page.id)).toEqual(['r2', 'r1']);
+
+        const r1Node = tree.find((node) => node.page.id === 'r1')!;
+        expect(r1Node.depth).toBe(0);
+        expect(r1Node.children.map((node) => node.page.id)).toEqual(['c2', 'c1']);
+
+        const c2Node = r1Node.children.find((node) => node.page.id === 'c2')!;
+        expect(c2Node.depth).toBe(1);
+        expect(c2Node.children.map((node) => node.page.id)).toEqual(['g1']);
+        expect(c2Node.children[0].depth).toBe(2);
+    });
+
+    it('treats pages with a missing parent as roots', () => {
+        const orphan = child('o1', 'gone', 'Orphan', 0);
+        const tree = buildPageTree([orphan]);
+        expect(tree.map((node) => node.page.id)).toEqual(['o1']);
+    });
+});
+
+describe('buildDescendantMap', () => {
+    it('collects the full subtree id set for each node', () => {
+        const root = makePage('r1', 'space-a', 'Root', 0);
+        const c1 = child('c1', 'r1', 'Child', 0);
+        const g1 = child('g1', 'c1', 'Grandchild', 0);
+
+        const map = buildDescendantMap(buildPageTree([root, c1, g1]));
+
+        expect(map.get('r1')).toEqual(new Set(['c1', 'g1']));
+        expect(map.get('c1')).toEqual(new Set(['g1']));
+        expect(map.get('g1')).toEqual(new Set());
+    });
+});
diff --git a/webapp/src/store/page_tree.ts b/webapp/src/store/page_tree.ts
new file mode 100644
index 0000000..ff16e3d
--- /dev/null
+++ b/webapp/src/store/page_tree.ts
@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {Page} from 'types/docs';
+
+// A node in the page tree: the page, its ordered children, and its depth from
+// the roots (roots are depth 0).
+export type PageNode = {
+    page: Page;
+    children: PageNode[];
+    depth: number;
+};
+
+const bySortOrder = (a: Page, b: Page): number =>
+    a.sort_order - b.sort_order || a.title.localeCompare(b.title);
+
+// Builds the page tree from a flat page list. Roots have parent_id === ''.
+// Children are ordered by sort_order (title as a stable tiebreak). Pages whose
+// parent isn't present are treated as roots so nothing is silently dropped.
+export function buildPageTree(pages: Page[]): PageNode[] {
+    const byParent = new Map<string, Page[]>();
+    const ids = new Set(pages.map((page) => page.id));
+
+    for (const page of pages) {
+        const parentId = ids.has(page.parent_id) ? page.parent_id : '';
+        const group = byParent.get(parentId);
+        if (group) {
+            group.push(page);
+        } else {
+            byParent.set(parentId, [page]);
+        }
+    }
+
+    const build = (parentId: string, depth: number): PageNode[] =>
+        (byParent.get(parentId) ?? []).
+            slice().
+            sort(bySortOrder).
+            map((page) => ({page, children: build(page.id, depth + 1), depth}));
+
+    return build('', 0);
+}
+
+// Maps each page id to the set of its descendant ids (excluding itself). Backs
+// the drag guard that forbids dropping a page into its own subtree.
+export function buildDescendantMap(roots: PageNode[]): Map<string, Set<string>> {
+    const map = new Map<string, Set<string>>();
+
+    const collect = (node: PageNode): Set<string> => {
+        const descendants = new Set<string>();
+        for (const child of node.children) {
+            descendants.add(child.page.id);
+            for (const id of collect(child)) {
+                descendants.add(id);
+            }
+        }
+        map.set(node.page.id, descendants);
+        return descendants;
+    };
+
+    roots.forEach(collect);
+    return map;
+}
diff --git a/webapp/src/store/reducer.test.ts b/webapp/src/store/reducer.test.ts
index 3fae465..eed937f 100644
--- a/webapp/src/store/reducer.test.ts
+++ b/webapp/src/store/reducer.test.ts
@@ -2,9 +2,14 @@
 // See LICENSE.txt for license information.
 
 import {PageTypes, SpaceTypes} from './action_types';
-import reducer from './reducer';
+import reducer, {reindexAfterMove} from './reducer';
 import {makePage, makeSpace} from './test_fixtures';
 
+const withParent = (id: string, parentId: string, title: string, sortOrder: number) => ({
+    ...makePage(id, 'space-a', title, sortOrder),
+    parent_id: parentId,
+});
+
 describe('spaces', () => {
     const initialState = reducer(undefined, {type: '@@INIT'});
 
@@ -74,4 +79,61 @@ describe('pages', () => {
         expect(afterDelete.pagesInSpace['space-a']).toBeUndefined();
         expect(afterDelete.pagesInSpace['space-b']).toEqual(new Set(['p2']));
     });
+
+    it('MOVED_PAGE reindexes the moved page within the store', () => {
+        const a = withParent('a', '', 'A', 0);
+        const b = withParent('b', '', 'B', 1);
+        const c = withParent('c', '', 'C', 2);
+
+        const afterReceive = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [a, b, c]});
+        const afterMove = reducer(afterReceive, {
+            type: PageTypes.MOVED_PAGE,
+            pageId: 'c',
+            spaceId: 'space-a',
+            parentId: '',
+            siblingIndex: 0,
+        });
+
+        expect(afterMove.pages.c.sort_order).toBe(0);
+        expect(afterMove.pages.a.sort_order).toBe(1);
+        expect(afterMove.pages.b.sort_order).toBe(2);
+    });
+});
+
+describe('reindexAfterMove', () => {
+    it('reorders siblings within the same parent (0-based)', () => {
+        const byId = {
+            a: withParent('a', '', 'A', 0),
+            b: withParent('b', '', 'B', 1),
+            c: withParent('c', '', 'C', 2),
+        };
+
+        // Move A to the end.
+        const next = reindexAfterMove(byId, 'a', 'space-a', '', 2);
+
+        expect(next.b.sort_order).toBe(0);
+        expect(next.c.sort_order).toBe(1);
+        expect(next.a.sort_order).toBe(2);
+        expect(next.a.parent_id).toBe('');
+    });
+
+    it('reparents a page and reindexes both the old and new sibling groups', () => {
+        const byId = {
+            p: withParent('p', '', 'Parent', 0),
+            a: withParent('a', '', 'A', 1),
+            b: withParent('b', '', 'B', 2),
+            x: withParent('x', 'p', 'X', 0),
+        };
+
+        // Move B under P as its first child.
+        const next = reindexAfterMove(byId, 'b', 'space-a', 'p', 0);
+
+        expect(next.b.parent_id).toBe('p');
+        expect(next.b.sort_order).toBe(0);
+        expect(next.x.sort_order).toBe(1);
+
+        // Old root group renumbers to fill the gap.
+        expect(next.p.sort_order).toBe(0);
+        expect(next.a.sort_order).toBe(1);
+    });
 });
diff --git a/webapp/src/store/reducer.ts b/webapp/src/store/reducer.ts
index f38329c..0e11316 100644
--- a/webapp/src/store/reducer.ts
+++ b/webapp/src/store/reducer.ts
@@ -12,8 +12,50 @@ type ReceivedSpacesAction = {spaces: Space[]};
 type CreatedSpaceAction = {space: Space};
 type DeletedSpaceAction = {spaceId: string};
 type ReceivedPagesAction = {pages: Page[]};
+type MovedPageAction = {pageId: string; spaceId: string; parentId: string; siblingIndex: number};
 type ReceivedSpaceMembersAction = {spaceId: string; userIds: string[]};
 
+const bySortOrder = (a: Page, b: Page): number =>
+    a.sort_order - b.sort_order || a.title.localeCompare(b.title);
+
+// Moves a page under `newParentId` at `siblingIndex` and renumbers the affected
+// sibling groups' sort_order 0-based, mirroring the server's reindex. Returns a
+// new byId map (untouched pages are shared by reference). Only pages in
+// `spaceId` are considered; a pure reorder (same parent) skips the old group.
+export function reindexAfterMove(
+    byId: Record<string, Page>,
+    pageId: string,
+    spaceId: string,
+    newParentId: string,
+    siblingIndex: number,
+): Record<string, Page> {
+    const moved = byId[pageId];
+    if (!moved) {
+        return byId;
+    }
+    const oldParentId = moved.parent_id;
+    const next = {...byId};
+
+    const groupOf = (parentId: string): Page[] => Object.values(byId).
+        filter((page) => page.space_id === spaceId && page.parent_id === parentId && page.id !== pageId).
+        sort(bySortOrder);
+
+    const newGroup = groupOf(newParentId);
+    const index = Math.max(0, Math.min(siblingIndex, newGroup.length));
+    newGroup.splice(index, 0, moved);
+    newGroup.forEach((page, i) => {
+        next[page.id] = {...page, parent_id: newParentId, sort_order: i};
+    });
+
+    if (oldParentId !== newParentId) {
+        groupOf(oldParentId).forEach((page, i) => {
+            next[page.id] = {...page, sort_order: i};
+        });
+    }
+
+    return next;
+}
+
 // SpaceTypes'/PageTypes' values aren't string-literal types (manifest.id is
 // loaded via JSON.parse), so `action.type` can't discriminate a union by
 // itself — each case casts to its own shape, mirroring the core channels
@@ -107,6 +149,13 @@ function pages(state: Record<string, Page> = {}, action: UnknownAction): Record<
         }
         return next;
     }
+    case PageTypes.MOVED_PAGE: {
+        const {pageId, spaceId, parentId, siblingIndex} = action as unknown as MovedPageAction;
+        if (!(pageId in state)) {
+            return state;
+        }
+        return reindexAfterMove(state, pageId, spaceId, parentId, siblingIndex);
+    }
     case SpaceTypes.DELETED_SPACE: {
         const {spaceId} = action as unknown as DeletedSpaceAction;
         const remaining = Object.entries(state).filter(([, page]) => page.space_id !== spaceId);
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index ad932f2..a6470e7 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -58,6 +58,13 @@ export type Page = {
     delete_at: number;
 };
 
+// The fields needed to create a page. parentId is omitted for a root page (the
+// data source maps it to the server's parent_id).
+export type CreatePageInput = {
+    title: string;
+    parentId?: string;
+};
+
 export type SpaceSummary = {
     space: Space;
 

From 08c30e5a9e43c6eb9316022771b213e0fb3e8373 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 20:19:07 -0500
Subject: [PATCH 11/68] feat(docs): people-search combobox for Share, gated on
 canManageMembers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a real debounced people-search pipeline and a Base UI Autocomplete
combobox for the Share modal, gated on a named permission so nothing
misleading ships.

There is no server add-member API yet (roles/view-access + capabilities
land with PR #10), so a live "add people" control could only hold
selections client-side. The picker renders only when canManageMembers.

- store/permissions: getSpacePermissions(state, spaceId) selector +
  useSpacePermissions(spaceId) hook — the get/use split from core's
  channel_bookmarks/utils — returning named SpacePermissions
  {canManageMembers}; the seam PR #10's capability set drops into
- hooks/user_search: useUserSearch — 300ms-debounced searchProfiles scoped
  to the current team, mapped to MemberProfile, excludes already-shown ids
- share_space_modal/people_picker: Base UI Autocomplete (server-driven
  list, host Avatar rows, empty/searching states)
- share_space_modal: render the picker only when canManageMembers
---
 webapp/i18n/en.json                           |   2 +
 .../people_picker.module.scss                 | 110 ++++++++++++++++++
 .../share_space_modal/people_picker.tsx       | 108 +++++++++++++++++
 .../share_space_modal/share_space_modal.tsx   |  46 +++++---
 webapp/src/hooks/user_search.ts               |  82 +++++++++++++
 webapp/src/store/permissions.ts               |  35 ++++++
 6 files changed, 367 insertions(+), 16 deletions(-)
 create mode 100644 webapp/src/components/share_space_modal/people_picker.module.scss
 create mode 100644 webapp/src/components/share_space_modal/people_picker.tsx
 create mode 100644 webapp/src/hooks/user_search.ts
 create mode 100644 webapp/src/store/permissions.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 68e1a67..8b1f548 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -56,8 +56,10 @@
   "docs.share.access.canView": "Can View",
   "docs.share.copyLink": "Copy link",
   "docs.share.handle": "@{username}",
+  "docs.share.noResults": "No people found",
   "docs.share.role.admin": "Admin",
   "docs.share.search": "Add people or groups",
+  "docs.share.searching": "Searching…",
   "docs.share.title": "Share space",
   "docs.share.visibility.public": "Public",
   "docs.share.visibility.publicHint": "Anyone in Mattermost",
diff --git a/webapp/src/components/share_space_modal/people_picker.module.scss b/webapp/src/components/share_space_modal/people_picker.module.scss
new file mode 100644
index 0000000..0a6ce64
--- /dev/null
+++ b/webapp/src/components/share_space_modal/people_picker.module.scss
@@ -0,0 +1,110 @@
+.control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: var(--center-channel-bg);
+
+    &:focus-within {
+        padding: 11px 15px;
+        border: 2px solid var(--button-bg);
+    }
+}
+
+.searchIcon {
+    flex-shrink: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--center-channel-color);
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+
+    &:focus {
+        outline: none;
+    }
+
+    &::placeholder {
+        color: rgba(var(--center-channel-color-rgb), 0.64);
+    }
+}
+
+.positioner {
+    z-index: var(--z-index-menu);
+    width: var(--anchor-width);
+}
+
+.popup {
+    max-height: min(320px, var(--available-height));
+    padding: 8px 0;
+    overflow-y: auto;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: var(--center-channel-bg);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.empty {
+    padding: 8px 16px;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 14px;
+    line-height: 20px;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 6px 16px;
+    color: var(--center-channel-color);
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover,
+    &[data-highlighted] {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        outline: none;
+    }
+}
+
+.itemInfo {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    align-items: baseline;
+    gap: 6px;
+}
+
+.itemName {
+    color: var(--center-channel-color);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.itemUsername {
+    overflow: hidden;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/webapp/src/components/share_space_modal/people_picker.tsx b/webapp/src/components/share_space_modal/people_picker.tsx
new file mode 100644
index 0000000..421a94c
--- /dev/null
+++ b/webapp/src/components/share_space_modal/people_picker.tsx
@@ -0,0 +1,108 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Autocomplete} from '@base-ui-components/react/autocomplete';
+import type {MemberProfile} from 'hooks/members';
+import {useUserSearch} from 'hooks/user_search';
+import React, {useState} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {Avatar} from 'webapp_globals';
+
+import MagnifyIcon from '@mattermost/compass-icons/components/magnify';
+
+import styles from './people_picker.module.scss';
+
+type Props = {
+    excludeIds: string[];
+    onSelect: (user: MemberProfile) => void;
+};
+
+// Searchable people combobox for the share modal. Built on Base UI's Autocomplete
+// (mode='none' so the list is driven by the server search, not client filtering).
+// Picking a result fires onSelect and clears the query.
+const PeoplePicker = ({excludeIds, onSelect}: Props) => {
+    const {formatMessage} = useIntl();
+    const [query, setQuery] = useState('');
+    const {results, loading} = useUserSearch(query, excludeIds);
+
+    const placeholder = formatMessage({id: 'docs.share.search', defaultMessage: 'Add people or groups'});
+
+    const pick = (user: MemberProfile) => {
+        onSelect(user);
+        setQuery('');
+    };
+
+    return (
+        <Autocomplete.Root
+            items={results}
+            mode='none'
+            value={query}
+            onValueChange={setQuery}
+        >
+            <div className={styles.control}>
+                <MagnifyIcon
+                    className={styles.searchIcon}
+                    size={16}
+                />
+                <Autocomplete.Input
+                    className={styles.input}
+                    placeholder={placeholder}
+                    aria-label={placeholder}
+                />
+            </div>
+            <Autocomplete.Portal>
+                <Autocomplete.Positioner
+                    className={styles.positioner}
+                    sideOffset={4}
+                >
+                    <Autocomplete.Popup className={styles.popup}>
+                        <Autocomplete.Empty className={styles.empty}>
+                            {loading ? (
+                                <FormattedMessage
+                                    id='docs.share.searching'
+                                    defaultMessage='Searching…'
+                                />
+                            ) : (
+                                <FormattedMessage
+                                    id='docs.share.noResults'
+                                    defaultMessage='No people found'
+                                />
+                            )}
+                        </Autocomplete.Empty>
+                        <Autocomplete.List>
+                            {(user: MemberProfile) => (
+                                <Autocomplete.Item
+                                    key={user.id}
+                                    value={user}
+                                    className={styles.item}
+                                    onClick={() => pick(user)}
+                                >
+                                    <Avatar
+                                        url={user.avatarUrl}
+                                        username={user.username}
+                                        size='sm'
+                                        name=''
+                                    />
+                                    <span className={styles.itemInfo}>
+                                        <span className={styles.itemName}>{user.displayName}</span>
+                                        {user.username && (
+                                            <span className={styles.itemUsername}>
+                                                <FormattedMessage
+                                                    id='docs.share.handle'
+                                                    defaultMessage='@{username}'
+                                                    values={{username: user.username}}
+                                                />
+                                            </span>
+                                        )}
+                                    </span>
+                                </Autocomplete.Item>
+                            )}
+                        </Autocomplete.List>
+                    </Autocomplete.Popup>
+                </Autocomplete.Positioner>
+            </Autocomplete.Portal>
+        </Autocomplete.Root>
+    );
+};
+
+export default PeoplePicker;
diff --git a/webapp/src/components/share_space_modal/share_space_modal.tsx b/webapp/src/components/share_space_modal/share_space_modal.tsx
index 1626006..775eab3 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.tsx
+++ b/webapp/src/components/share_space_modal/share_space_modal.tsx
@@ -1,10 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type {MemberProfile} from 'hooks/members';
 import {useSpaceMemberProfiles} from 'hooks/members';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppSelector} from 'hooks/redux';
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {copyToClipboard} from 'utils/clipboard';
 import {Avatar} from 'webapp_globals';
@@ -12,16 +13,17 @@ import {Avatar} from 'webapp_globals';
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
 import ContentCopyIcon from '@mattermost/compass-icons/components/content-copy';
 import GlobeIcon from '@mattermost/compass-icons/components/globe';
-import MagnifyIcon from '@mattermost/compass-icons/components/magnify';
 
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
+import {useSpacePermissions} from 'store/permissions';
+
 import {Button, SecondaryButton} from 'components/form-controls/button';
-import TextInput from 'components/form-controls/text_input';
 import GenericModal from 'components/generic_modal/generic_modal';
 
 import type {Space} from 'types/docs';
 
+import PeoplePicker from './people_picker';
 import styles from './share_space_modal.module.scss';
 
 type Props = {
@@ -29,17 +31,30 @@ type Props = {
     onClose: () => void;
 };
 
-// Members come from the real member API; roles and space visibility (Admin /
-// Public / Can View) are capability/view-access features from PR #10, so those
-// dropdowns and the add-people search are visual scaffolding for now. Copy link
-// is functional.
+// Members come from the real member API and Copy link is functional. Roles and
+// space visibility (Admin / Public / Can View) are capability/view-access
+// features from PR #10, so those dropdowns are visual scaffolding.
+//
+// Adding people needs a server add-member API (also PR #10). The people-search
+// combobox and its live search pipeline are built, but gated on the
+// canManageMembers permission so we don't ship an "add people" control whose
+// selections can't persist (they'd only live client-side).
 const ShareSpaceModal = ({space, onClose}: Props) => {
     const {formatMessage} = useIntl();
     const {paths} = useDocsNavigation();
     const members = useSpaceMemberProfiles(space.id);
     const currentUserId = useAppSelector(getCurrentUserId);
+    const {canManageMembers} = useSpacePermissions(space.id);
+
+    // People chosen from the search picker. There's no add-member API yet
+    // (roles/view-access land with PR #10), so these are held client-side and
+    // shown alongside the real members until the server can persist them.
+    const [added, setAdded] = useState<MemberProfile[]>([]);
+
+    const displayedMembers = useMemo(() => [...members, ...added], [members, added]);
+    const excludeIds = useMemo(() => displayedMembers.map((member) => member.id), [displayedMembers]);
 
-    const [query, setQuery] = useState('');
+    const addPerson = (user: MemberProfile) => setAdded((prev) => [...prev, user]);
 
     const copyLink = () => copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
 
@@ -111,15 +126,14 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
             footer={footer}
         >
             <div className={styles.body}>
-                <TextInput
-                    id='docs-share-search'
-                    label={formatMessage({id: 'docs.share.search', defaultMessage: 'Add people or groups'})}
-                    value={query}
-                    onChange={setQuery}
-                    leading={<MagnifyIcon size={16}/>}
-                />
+                {canManageMembers && (
+                    <PeoplePicker
+                        excludeIds={excludeIds}
+                        onSelect={addPerson}
+                    />
+                )}
                 <div className={styles.memberList}>
-                    {members.map((member) => (
+                    {displayedMembers.map((member) => (
                         <div
                             key={member.id}
                             className={styles.memberRow}
diff --git a/webapp/src/hooks/user_search.ts b/webapp/src/hooks/user_search.ts
new file mode 100644
index 0000000..83eb442
--- /dev/null
+++ b/webapp/src/hooks/user_search.ts
@@ -0,0 +1,82 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {MemberProfile} from 'hooks/members';
+import {useAppDispatch, useAppSelector} from 'hooks/redux';
+import {useEffect, useMemo, useState} from 'react';
+
+import type {UserProfile} from '@mattermost/types/users';
+
+import {searchProfiles} from 'mattermost-redux/actions/users';
+import {Client4} from 'mattermost-redux/client';
+import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
+import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+import {displayUsername} from 'mattermost-redux/utils/user_utils';
+
+const SEARCH_DEBOUNCE_MS = 300;
+const SEARCH_LIMIT = 20;
+
+export type UserSearchResult = {
+    results: MemberProfile[];
+    loading: boolean;
+};
+
+// Server-side people search for the share picker, debounced and scoped to the
+// current team (the Playbooks pattern: searchProfiles into the host store, read
+// the returned profiles). Excludes ids already shown (existing members) so the
+// suggestions only offer people you can still add.
+export function useUserSearch(term: string, excludeIds: string[]): UserSearchResult {
+    const dispatch = useAppDispatch();
+    const teamId = useAppSelector(getCurrentTeamId);
+    const nameDisplay = useAppSelector(getTeammateNameDisplaySetting) || '';
+
+    const [profiles, setProfiles] = useState<UserProfile[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        const trimmed = term.trim();
+        if (!trimmed) {
+            setProfiles([]);
+            setLoading(false);
+            return undefined;
+        }
+
+        setLoading(true);
+        let cancelled = false;
+
+        const handle = window.setTimeout(async () => {
+            try {
+                const {data} = await dispatch(searchProfiles(trimmed, {team_id: teamId, limit: SEARCH_LIMIT}));
+                if (!cancelled) {
+                    setProfiles(data ?? []);
+                }
+            } catch {
+                if (!cancelled) {
+                    setProfiles([]);
+                }
+            } finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        }, SEARCH_DEBOUNCE_MS);
+
+        return () => {
+            cancelled = true;
+            window.clearTimeout(handle);
+        };
+    }, [dispatch, term, teamId]);
+
+    const exclude = useMemo(() => new Set(excludeIds), [excludeIds]);
+
+    const results = useMemo(() => profiles.
+        filter((profile) => !exclude.has(profile.id)).
+        map((profile) => ({
+            id: profile.id,
+            displayName: displayUsername(profile, nameDisplay),
+            username: profile.username,
+            avatarUrl: Client4.getProfilePictureUrl(profile.id, profile.last_picture_update),
+        })), [profiles, exclude, nameDisplay]);
+
+    return {results, loading};
+}
diff --git a/webapp/src/store/permissions.ts b/webapp/src/store/permissions.ts
new file mode 100644
index 0000000..f8ebd95
--- /dev/null
+++ b/webapp/src/store/permissions.ts
@@ -0,0 +1,35 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useAppSelector} from 'hooks/redux';
+
+import type {GlobalState} from '@mattermost/types/store';
+
+// Named space permissions for the current user. Capabilities/RBAC land with
+// PR #10 (a per-member capability set on the space's backing-channel
+// membership); until then everything is a conservative default, so the UI never
+// offers an action the server can't yet honor.
+export type SpacePermissions = {
+
+    // Add or remove space members. Needs the add-member API + capabilities from
+    // PR #10.
+    canManageMembers: boolean;
+};
+
+const NO_PERMISSIONS: SpacePermissions = {
+    canManageMembers: false,
+};
+
+// Pure selector so a check works in thunks/other selectors too, mirroring
+// core's getHaveIChannelBookmarkPermission (channel_bookmarks/utils). PR #10's
+// capability set will feed this, keyed by spaceId; today it returns the safe
+// defaults. Returns a stable reference so useSelector doesn't re-render.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- state/spaceId are the API the real capability lookup (PR #10) will use
+export function getSpacePermissions(state: GlobalState, spaceId: string): SpacePermissions {
+    return NO_PERMISSIONS;
+}
+
+// Thin hook wrapper, matching core's useChannelBookmarkPermission.
+export function useSpacePermissions(spaceId: string): SpacePermissions {
+    return useAppSelector((state) => getSpacePermissions(state, spaceId));
+}

From 631754c86b704e39f42293fa17cae93d2878b268 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 21:18:20 -0500
Subject: [PATCH 12/68] chore(docs): dev-ungate add-members; member count opens
 Share

- permissions: a DEV override forces canManageMembers on so the add-people
  picker is exercisable before PR #10's capability set exists. The get/use
  permission hooks are unchanged; revert the default to false (and wire the
  real capability source) before shipping.
- space title bar: the member count is now a button that opens the Share
  modal, the same as the Share button.
---
 webapp/i18n/en.json                                 |  1 +
 .../src/components/space_view/space_title_bar.tsx   | 12 ++++++++++--
 webapp/src/store/permissions.ts                     | 13 ++++++++-----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 8b1f548..9a7de24 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -91,6 +91,7 @@
   "docs.space.edit": "Edit",
   "docs.space.expand": "Expand",
   "docs.space.favorite": "Favorite this space",
+  "docs.space.membersButton": "Members",
   "docs.space.membersOverflow": "+{count}",
   "docs.space.menu": "Space options",
   "docs.space.more": "More actions",
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_title_bar.tsx
index 8fb4d85..c7f8f07 100644
--- a/webapp/src/components/space_view/space_title_bar.tsx
+++ b/webapp/src/components/space_view/space_title_bar.tsx
@@ -28,6 +28,7 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
     const favoriteLabel = formatMessage({id: 'docs.space.favorite', defaultMessage: 'Favorite this space'});
     const menuLabel = formatMessage({id: 'docs.space.menu', defaultMessage: 'Space options'});
     const detailsLabel = formatMessage({id: 'docs.space.details', defaultMessage: 'Space details'});
+    const membersLabel = formatMessage({id: 'docs.space.membersButton', defaultMessage: 'Members'});
 
     return (
         <div className={styles.bar}>
@@ -63,10 +64,17 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
                         size={16}
                     />
                 </Button>
-                <span className={styles.members}>
+                <Button
+                    type='button'
+                    emphasis='quaternary'
+                    size='sm'
+                    className={styles.members}
+                    aria-label={membersLabel}
+                    onClick={() => setShareOpen(true)}
+                >
                     <AccountMultipleOutlineIcon size={16}/>
                     <span>{memberCount}</span>
-                </span>
+                </Button>
             </div>
 
             <div className={styles.right}>
diff --git a/webapp/src/store/permissions.ts b/webapp/src/store/permissions.ts
index f8ebd95..a2cb96a 100644
--- a/webapp/src/store/permissions.ts
+++ b/webapp/src/store/permissions.ts
@@ -16,17 +16,20 @@ export type SpacePermissions = {
     canManageMembers: boolean;
 };
 
-const NO_PERMISSIONS: SpacePermissions = {
-    canManageMembers: false,
+// DEV OVERRIDE: canManageMembers is forced on so the add-people flow is
+// exercisable before PR #10's capability set exists. Revert to false (and wire
+// the real capability source below) before shipping.
+const DEFAULT_PERMISSIONS: SpacePermissions = {
+    canManageMembers: true,
 };
 
 // Pure selector so a check works in thunks/other selectors too, mirroring
 // core's getHaveIChannelBookmarkPermission (channel_bookmarks/utils). PR #10's
-// capability set will feed this, keyed by spaceId; today it returns the safe
-// defaults. Returns a stable reference so useSelector doesn't re-render.
+// capability set will feed this, keyed by spaceId. Returns a stable reference so
+// useSelector doesn't re-render.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- state/spaceId are the API the real capability lookup (PR #10) will use
 export function getSpacePermissions(state: GlobalState, spaceId: string): SpacePermissions {
-    return NO_PERMISSIONS;
+    return DEFAULT_PERMISSIONS;
 }
 
 // Thin hook wrapper, matching core's useChannelBookmarkPermission.

From 2c11e33a38a3c82ef01467d837aaa29d5f51f3ba Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 21:31:22 -0500
Subject: [PATCH 13/68] fix(docs): neutral grey for btn-icon buttons
 (port-to-core)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shared Button is accent-only: every emphasis (quaternary etc.) colors
with --button-bg, and its rule follows .btn-icon in core's _buttons.scss,
so `<Button emphasis='quaternary' className='btn-icon'>` renders the
canonical icon markup but in accent blue instead of neutral grey.

Add a :global override that raises .btn-icon's specificity over the
emphasis so icon buttons stay neutral (center-channel-color), loaded as a
side effect via the button wrapper so it applies everywhere. Marked
PORT-TO-CORE — fold into core's .btn-icon rule and delete when it lands.
---
 webapp/src/components/form-controls/button.tsx  |  4 ++++
 .../button_icon_neutral.module.scss             | 17 +++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 webapp/src/components/form-controls/button_icon_neutral.module.scss

diff --git a/webapp/src/components/form-controls/button.tsx b/webapp/src/components/form-controls/button.tsx
index 2fa878d..7c906b9 100644
--- a/webapp/src/components/form-controls/button.tsx
+++ b/webapp/src/components/form-controls/button.tsx
@@ -6,6 +6,10 @@ import React from 'react';
 import {Button} from '@mattermost/shared/components/button';
 import type {ButtonProps} from '@mattermost/shared/components/button';
 
+// Neutral-grey fix for `btn-icon` buttons (the shared Button is accent-only);
+// loaded as a side effect so it applies wherever these buttons render.
+import './button_icon_neutral.module.scss';
+
 // The Docs plugin avoids styled-components (its browser ESM references `process`
 // and throws in the plugin runtime), so these are plain functional wrappers that
 // bind the emphasis/variant preset.
diff --git a/webapp/src/components/form-controls/button_icon_neutral.module.scss b/webapp/src/components/form-controls/button_icon_neutral.module.scss
new file mode 100644
index 0000000..97ab99f
--- /dev/null
+++ b/webapp/src/components/form-controls/button_icon_neutral.module.scss
@@ -0,0 +1,17 @@
+/*
+ * PORT-TO-CORE: the shared Button always adds an accent-colored emphasis class
+ * (btn-quaternary etc.). In core's _buttons.scss that color rule is declared
+ * after .btn-icon, so it overrides .btn-icon's neutral grey by source order —
+ * a `<Button emphasis='quaternary' className='btn-icon'>` renders accent-blue
+ * instead of the neutral toolbar grey. Raising .btn-icon's specificity over the
+ * emphasis keeps icon buttons neutral. Fold this into core's .btn-icon rule
+ * (and delete this file) once it lands upstream.
+ */
+:global(.btn.btn-icon.btn-quaternary) {
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+}
+
+:global(.btn.btn-icon.btn-quaternary:hover),
+:global(.btn.btn-icon.btn-quaternary.btn-force-hover) {
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+}

From 777a5eef182ee7b49426e53cfca3a5641fa258a7 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 21:59:42 -0500
Subject: [PATCH 14/68] refactor(docs): neutral toolbar buttons; form-controls
 -> form_controls

Button styling:
- Pages toggle and Edit are neutral ghost buttons now (not accent-blue /
  bordered secondary). Edit is an icon+label ghost (pencil + "Edit").
- Members count and the favorite star use btn-xs, closer to core's
  channel-header favorite toggle; Members reads neutral.
- Generalize the port-to-core neutral treatment to also cover labeled
  quaternary ghost buttons via a `docs-btn-neutral` marker, alongside the
  existing `.btn-icon` rule (renamed button_icon_neutral -> button_neutral).

Rename components/form-controls -> components/form_controls (underscore,
matching the rest of the tree), updating all imports.
---
 .../confirm_modal/confirm_modal.tsx           |  2 +-
 .../create_space_modal/create_space_modal.tsx | 10 ++++-----
 webapp/src/components/docs_home/docs_home.tsx |  2 +-
 .../button_icon_neutral.module.scss           | 17 --------------
 .../button.test.tsx                           |  0
 .../button.tsx                                |  7 +++---
 .../form_controls/button_neutral.module.scss  | 22 +++++++++++++++++++
 .../public_private_selector.module.scss       |  0
 .../public_private_selector.test.tsx          |  0
 .../public_private_selector.tsx               |  0
 .../text_area.module.scss                     |  0
 .../text_area.test.tsx                        |  0
 .../text_area.tsx                             |  0
 .../text_input.module.scss                    |  0
 .../text_input.test.tsx                       |  0
 .../text_input.tsx                            |  0
 .../url_input.module.scss                     |  0
 .../url_input.test.tsx                        |  0
 .../url_input.tsx                             |  0
 .../share_space_modal/share_space_modal.tsx   |  2 +-
 webapp/src/components/space_view/page_bar.tsx | 11 +++++-----
 .../space_view/page_tree/page_tree_node.tsx   |  6 ++---
 .../space_view/page_tree/page_tree_panel.tsx  |  2 +-
 .../components/space_view/space_title_bar.tsx |  9 ++++----
 24 files changed, 48 insertions(+), 42 deletions(-)
 delete mode 100644 webapp/src/components/form-controls/button_icon_neutral.module.scss
 rename webapp/src/components/{form-controls => form_controls}/button.test.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/button.tsx (85%)
 create mode 100644 webapp/src/components/form_controls/button_neutral.module.scss
 rename webapp/src/components/{form-controls => form_controls}/public_private_selector.module.scss (100%)
 rename webapp/src/components/{form-controls => form_controls}/public_private_selector.test.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/public_private_selector.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/text_area.module.scss (100%)
 rename webapp/src/components/{form-controls => form_controls}/text_area.test.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/text_area.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/text_input.module.scss (100%)
 rename webapp/src/components/{form-controls => form_controls}/text_input.test.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/text_input.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/url_input.module.scss (100%)
 rename webapp/src/components/{form-controls => form_controls}/url_input.test.tsx (100%)
 rename webapp/src/components/{form-controls => form_controls}/url_input.tsx (100%)

diff --git a/webapp/src/components/confirm_modal/confirm_modal.tsx b/webapp/src/components/confirm_modal/confirm_modal.tsx
index 7fb12c6..7a66163 100644
--- a/webapp/src/components/confirm_modal/confirm_modal.tsx
+++ b/webapp/src/components/confirm_modal/confirm_modal.tsx
@@ -4,7 +4,7 @@
 import React, {useRef} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {DestructiveButton, PrimaryButton, TertiaryButton} from 'components/form-controls/button';
+import {DestructiveButton, PrimaryButton, TertiaryButton} from 'components/form_controls/button';
 import GenericModal from 'components/generic_modal/generic_modal';
 
 import styles from './confirm_modal.module.scss';
diff --git a/webapp/src/components/create_space_modal/create_space_modal.tsx b/webapp/src/components/create_space_modal/create_space_modal.tsx
index bf9d174..c7b15dd 100644
--- a/webapp/src/components/create_space_modal/create_space_modal.tsx
+++ b/webapp/src/components/create_space_modal/create_space_modal.tsx
@@ -10,11 +10,11 @@ import {SPACE_DESCRIPTION_MAX_LENGTH, SPACE_NAME_MAX_LENGTH} from 'validation/sp
 import GlobeIcon from '@mattermost/compass-icons/components/globe';
 import LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';
 
-import {PrimaryButton, TertiaryButton} from 'components/form-controls/button';
-import type {SelectorOption} from 'components/form-controls/public_private_selector';
-import PublicPrivateSelector from 'components/form-controls/public_private_selector';
-import TextArea from 'components/form-controls/text_area';
-import TextInput from 'components/form-controls/text_input';
+import {PrimaryButton, TertiaryButton} from 'components/form_controls/button';
+import type {SelectorOption} from 'components/form_controls/public_private_selector';
+import PublicPrivateSelector from 'components/form_controls/public_private_selector';
+import TextArea from 'components/form_controls/text_area';
+import TextInput from 'components/form_controls/text_input';
 import GenericModal from 'components/generic_modal/generic_modal';
 
 import type {Space, SpaceVisibility} from 'types/docs';
diff --git a/webapp/src/components/docs_home/docs_home.tsx b/webapp/src/components/docs_home/docs_home.tsx
index 8473921..cc15d6e 100644
--- a/webapp/src/components/docs_home/docs_home.tsx
+++ b/webapp/src/components/docs_home/docs_home.tsx
@@ -15,7 +15,7 @@ import NotebookOutlineIcon from '@mattermost/compass-icons/components/notebook-o
 import PlusIcon from '@mattermost/compass-icons/components/plus';
 import SearchListIcon from '@mattermost/compass-icons/components/search-list';
 
-import {PrimaryButton, TertiaryButton} from 'components/form-controls/button';
+import {PrimaryButton, TertiaryButton} from 'components/form_controls/button';
 
 import type {SpaceSummary} from 'types/docs';
 
diff --git a/webapp/src/components/form-controls/button_icon_neutral.module.scss b/webapp/src/components/form-controls/button_icon_neutral.module.scss
deleted file mode 100644
index 97ab99f..0000000
--- a/webapp/src/components/form-controls/button_icon_neutral.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * PORT-TO-CORE: the shared Button always adds an accent-colored emphasis class
- * (btn-quaternary etc.). In core's _buttons.scss that color rule is declared
- * after .btn-icon, so it overrides .btn-icon's neutral grey by source order —
- * a `<Button emphasis='quaternary' className='btn-icon'>` renders accent-blue
- * instead of the neutral toolbar grey. Raising .btn-icon's specificity over the
- * emphasis keeps icon buttons neutral. Fold this into core's .btn-icon rule
- * (and delete this file) once it lands upstream.
- */
-:global(.btn.btn-icon.btn-quaternary) {
-    color: rgba(var(--center-channel-color-rgb), 0.56);
-}
-
-:global(.btn.btn-icon.btn-quaternary:hover),
-:global(.btn.btn-icon.btn-quaternary.btn-force-hover) {
-    color: rgba(var(--center-channel-color-rgb), 0.72);
-}
diff --git a/webapp/src/components/form-controls/button.test.tsx b/webapp/src/components/form_controls/button.test.tsx
similarity index 100%
rename from webapp/src/components/form-controls/button.test.tsx
rename to webapp/src/components/form_controls/button.test.tsx
diff --git a/webapp/src/components/form-controls/button.tsx b/webapp/src/components/form_controls/button.tsx
similarity index 85%
rename from webapp/src/components/form-controls/button.tsx
rename to webapp/src/components/form_controls/button.tsx
index 7c906b9..5d7e1ee 100644
--- a/webapp/src/components/form-controls/button.tsx
+++ b/webapp/src/components/form_controls/button.tsx
@@ -6,9 +6,10 @@ import React from 'react';
 import {Button} from '@mattermost/shared/components/button';
 import type {ButtonProps} from '@mattermost/shared/components/button';
 
-// Neutral-grey fix for `btn-icon` buttons (the shared Button is accent-only);
-// loaded as a side effect so it applies wherever these buttons render.
-import './button_icon_neutral.module.scss';
+// Neutral-grey treatment for `btn-icon` and `docs-btn-neutral` ghost buttons
+// (the shared Button is accent-only); loaded as a side effect so it applies
+// wherever these buttons render.
+import './button_neutral.module.scss';
 
 // The Docs plugin avoids styled-components (its browser ESM references `process`
 // and throws in the plugin runtime), so these are plain functional wrappers that
diff --git a/webapp/src/components/form_controls/button_neutral.module.scss b/webapp/src/components/form_controls/button_neutral.module.scss
new file mode 100644
index 0000000..87f817d
--- /dev/null
+++ b/webapp/src/components/form_controls/button_neutral.module.scss
@@ -0,0 +1,22 @@
+/*
+ * PORT-TO-CORE: the shared Button is accent-only (every emphasis colors with
+ * --button-bg). These :global rules restore a neutral (grey) treatment for
+ * ghost buttons that should read as toolbar controls, not accent actions —
+ * matching core's header icon buttons (center-channel-color + icon opacity):
+ *   - `.btn-icon` quaternary icon buttons (core's .btn-icon grey is otherwise
+ *     overridden by the later emphasis color, so raise its specificity)
+ *   - quaternary buttons marked `docs-btn-neutral` that carry a label
+ * Fold the icon rule into core's .btn-icon; the label rule is a docs stopgap
+ * until a neutral emphasis exists upstream.
+ */
+:global(.btn.btn-icon.btn-quaternary),
+:global(.btn.btn-quaternary.docs-btn-neutral) {
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+:global(.btn.btn-icon.btn-quaternary:hover),
+:global(.btn.btn-icon.btn-quaternary.btn-force-hover),
+:global(.btn.btn-quaternary.docs-btn-neutral:hover),
+:global(.btn.btn-quaternary.docs-btn-neutral.btn-force-hover) {
+    color: var(--center-channel-color);
+}
diff --git a/webapp/src/components/form-controls/public_private_selector.module.scss b/webapp/src/components/form_controls/public_private_selector.module.scss
similarity index 100%
rename from webapp/src/components/form-controls/public_private_selector.module.scss
rename to webapp/src/components/form_controls/public_private_selector.module.scss
diff --git a/webapp/src/components/form-controls/public_private_selector.test.tsx b/webapp/src/components/form_controls/public_private_selector.test.tsx
similarity index 100%
rename from webapp/src/components/form-controls/public_private_selector.test.tsx
rename to webapp/src/components/form_controls/public_private_selector.test.tsx
diff --git a/webapp/src/components/form-controls/public_private_selector.tsx b/webapp/src/components/form_controls/public_private_selector.tsx
similarity index 100%
rename from webapp/src/components/form-controls/public_private_selector.tsx
rename to webapp/src/components/form_controls/public_private_selector.tsx
diff --git a/webapp/src/components/form-controls/text_area.module.scss b/webapp/src/components/form_controls/text_area.module.scss
similarity index 100%
rename from webapp/src/components/form-controls/text_area.module.scss
rename to webapp/src/components/form_controls/text_area.module.scss
diff --git a/webapp/src/components/form-controls/text_area.test.tsx b/webapp/src/components/form_controls/text_area.test.tsx
similarity index 100%
rename from webapp/src/components/form-controls/text_area.test.tsx
rename to webapp/src/components/form_controls/text_area.test.tsx
diff --git a/webapp/src/components/form-controls/text_area.tsx b/webapp/src/components/form_controls/text_area.tsx
similarity index 100%
rename from webapp/src/components/form-controls/text_area.tsx
rename to webapp/src/components/form_controls/text_area.tsx
diff --git a/webapp/src/components/form-controls/text_input.module.scss b/webapp/src/components/form_controls/text_input.module.scss
similarity index 100%
rename from webapp/src/components/form-controls/text_input.module.scss
rename to webapp/src/components/form_controls/text_input.module.scss
diff --git a/webapp/src/components/form-controls/text_input.test.tsx b/webapp/src/components/form_controls/text_input.test.tsx
similarity index 100%
rename from webapp/src/components/form-controls/text_input.test.tsx
rename to webapp/src/components/form_controls/text_input.test.tsx
diff --git a/webapp/src/components/form-controls/text_input.tsx b/webapp/src/components/form_controls/text_input.tsx
similarity index 100%
rename from webapp/src/components/form-controls/text_input.tsx
rename to webapp/src/components/form_controls/text_input.tsx
diff --git a/webapp/src/components/form-controls/url_input.module.scss b/webapp/src/components/form_controls/url_input.module.scss
similarity index 100%
rename from webapp/src/components/form-controls/url_input.module.scss
rename to webapp/src/components/form_controls/url_input.module.scss
diff --git a/webapp/src/components/form-controls/url_input.test.tsx b/webapp/src/components/form_controls/url_input.test.tsx
similarity index 100%
rename from webapp/src/components/form-controls/url_input.test.tsx
rename to webapp/src/components/form_controls/url_input.test.tsx
diff --git a/webapp/src/components/form-controls/url_input.tsx b/webapp/src/components/form_controls/url_input.tsx
similarity index 100%
rename from webapp/src/components/form-controls/url_input.tsx
rename to webapp/src/components/form_controls/url_input.tsx
diff --git a/webapp/src/components/share_space_modal/share_space_modal.tsx b/webapp/src/components/share_space_modal/share_space_modal.tsx
index 775eab3..9a4dde2 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.tsx
+++ b/webapp/src/components/share_space_modal/share_space_modal.tsx
@@ -18,7 +18,7 @@ import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import {useSpacePermissions} from 'store/permissions';
 
-import {Button, SecondaryButton} from 'components/form-controls/button';
+import {Button, SecondaryButton} from 'components/form_controls/button';
 import GenericModal from 'components/generic_modal/generic_modal';
 
 import type {Space} from 'types/docs';
diff --git a/webapp/src/components/space_view/page_bar.tsx b/webapp/src/components/space_view/page_bar.tsx
index 60ec856..d853c2c 100644
--- a/webapp/src/components/space_view/page_bar.tsx
+++ b/webapp/src/components/space_view/page_bar.tsx
@@ -13,7 +13,7 @@ import FormatListBulletedIcon from '@mattermost/compass-icons/components/format-
 import MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';
 import PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';
 
-import {Button, SecondaryButton} from 'components/form-controls/button';
+import {Button} from 'components/form_controls/button';
 
 import type {Space} from 'types/docs';
 
@@ -63,7 +63,7 @@ const PageBar = ({space, treeOpen, onTogglePages}: Props) => {
                     type='button'
                     emphasis='quaternary'
                     size='sm'
-                    className={styles.pagesToggle}
+                    className={classNames('docs-btn-neutral', styles.pagesToggle)}
                     aria-label={pagesLabel}
                     aria-pressed={treeOpen}
                     onClick={onTogglePages}
@@ -98,17 +98,18 @@ const PageBar = ({space, treeOpen, onTogglePages}: Props) => {
                     <MessageTextOutlineIcon size={18}/>
                     <span className={styles.badge}/>
                 </Button>
-                <SecondaryButton
+                <Button
                     type='button'
+                    emphasis='quaternary'
                     size='sm'
-                    className={styles.edit}
+                    className={classNames('docs-btn-neutral', styles.edit)}
                 >
                     <PencilOutlineIcon size={14}/>
                     <FormattedMessage
                         id='docs.space.edit'
                         defaultMessage='Edit'
                     />
-                </SecondaryButton>
+                </Button>
                 <Button
                     type='button'
                     emphasis='quaternary'
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index 2af49ff..93c2a55 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -13,7 +13,7 @@ import FolderOutlineIcon from '@mattermost/compass-icons/components/folder-outli
 
 import type {PageNode} from 'store/page_tree';
 
-import {Button} from 'components/form-controls/button';
+import {Button} from 'components/form_controls/button';
 
 import {usePageDragDrop} from './dnd/use_page_drag_drop';
 import styles from './page_tree_node.module.scss';
@@ -37,9 +37,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, dndEnabled, o
     const hasChildren = children.length > 0;
     const isCollapsed = collapsed.has(page.id);
 
-    const toggleLabel = isCollapsed ?
-        formatMessage({id: 'docs.pageTree.expand', defaultMessage: 'Expand {title}'}, {title: page.title}) :
-        formatMessage({id: 'docs.pageTree.collapse', defaultMessage: 'Collapse {title}'}, {title: page.title});
+    const toggleLabel = isCollapsed ? formatMessage({id: 'docs.pageTree.expand', defaultMessage: 'Expand {title}'}, {title: page.title}) : formatMessage({id: 'docs.pageTree.collapse', defaultMessage: 'Collapse {title}'}, {title: page.title});
 
     const {dragging, dropTarget} = usePageDragDrop({
         pageId: page.id,
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
index 40391f7..0d70ecf 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
@@ -13,7 +13,7 @@ import {createPage, movePage} from 'store/actions';
 import {buildDescendantMap, buildPageTree} from 'store/page_tree';
 import {getPagesForSpace} from 'store/selectors';
 
-import {Button} from 'components/form-controls/button';
+import {Button} from 'components/form_controls/button';
 
 import type {Space} from 'types/docs';
 
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_title_bar.tsx
index c7f8f07..c667688 100644
--- a/webapp/src/components/space_view/space_title_bar.tsx
+++ b/webapp/src/components/space_view/space_title_bar.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React, {useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
@@ -11,7 +12,7 @@ import InformationOutlineIcon from '@mattermost/compass-icons/components/informa
 import ShareVariantOutlineIcon from '@mattermost/compass-icons/components/share-variant-outline';
 import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
 
-import {Button, PrimaryButton} from 'components/form-controls/button';
+import {Button, PrimaryButton} from 'components/form_controls/button';
 import ShareSpaceModal from 'components/share_space_modal/share_space_modal';
 
 import type {Space} from 'types/docs';
@@ -36,7 +37,7 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
                 <Button
                     type='button'
                     emphasis='quaternary'
-                    size='sm'
+                    size='xs'
                     className='btn-icon'
                     aria-label={favoriteLabel}
                 >
@@ -67,8 +68,8 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
                 <Button
                     type='button'
                     emphasis='quaternary'
-                    size='sm'
-                    className={styles.members}
+                    size='xs'
+                    className={classNames('docs-btn-neutral', styles.members)}
                     aria-label={membersLabel}
                     onClick={() => setShareOpen(true)}
                 >

From d3b07d2660f849151ddf0a4b3b50a92d630c22bb Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 22:05:09 -0500
Subject: [PATCH 15/68] fix(docs): grey hover for neutral toolbar buttons

btn-quaternary hovers with an accent-blue wash; the neutral icon/label
ghost buttons now use the grey channel-header hover instead.
---
 .../src/components/form_controls/button_neutral.module.scss   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/webapp/src/components/form_controls/button_neutral.module.scss b/webapp/src/components/form_controls/button_neutral.module.scss
index 87f817d..9b4446e 100644
--- a/webapp/src/components/form_controls/button_neutral.module.scss
+++ b/webapp/src/components/form_controls/button_neutral.module.scss
@@ -18,5 +18,9 @@
 :global(.btn.btn-icon.btn-quaternary.btn-force-hover),
 :global(.btn.btn-quaternary.docs-btn-neutral:hover),
 :global(.btn.btn-quaternary.docs-btn-neutral.btn-force-hover) {
+
+    // btn-quaternary hovers with an accent-blue wash; neutral toolbar buttons
+    // use the grey channel-header hover instead.
+    background: rgba(var(--center-channel-color-rgb), 0.08);
     color: var(--center-channel-color);
 }

From eff0873282f3c14fd72fda2a58a8b5aa0b571831 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 22:23:02 -0500
Subject: [PATCH 16/68] feat(docs): space menu, Settings modal, and Info panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Space management from the title bar, backed by the real update/archive APIs.

- data/store: updateSpace (PATCH /spaces/{id}) and deleteSpace (DELETE)
  data-source methods + thunks; UpdateSpacePatch type
- Space Settings modal (space_settings_modal): tabbed (Info / Permissions /
  Configuration / Archive). Info edits name+description via updateSpace;
  Archive confirms then deleteSpace + goHome. Permissions/Configuration are
  PR #10 scaffolding (view_access, roles, external sharing).
- Space Info panel (space_info): read-only RHS mirroring core's Channel Info
  — icon/title, description, members (avatars), page count + created time;
  renders as the right column of the space view.
- title bar: the space name opens a dropdown menu (Space info, Members, Copy
  link, Space settings, Leave, Archive; Settings/Archive gated on
  canManageMembers). The details button is now the Info-panel toggle.

Built via subagents from an on-disk plan; reviewed and gates re-run here.
---
 webapp/i18n/en.json                           |  55 ++
 .../space_info/space_info_panel.module.scss   | 166 ++++++
 .../space_info/space_info_panel.tsx           | 181 ++++++
 .../space_settings_modal.module.scss          | 245 +++++++++
 .../space_settings_modal.test.tsx             |  92 ++++
 .../space_settings_modal.tsx                  | 514 ++++++++++++++++++
 .../components/space_view/space_title_bar.tsx | 252 ++++++++-
 .../src/components/space_view/space_view.tsx  |  27 +-
 webapp/src/data/api_data_source.ts            |  11 +-
 webapp/src/data/docs_data_source.ts           |  12 +-
 webapp/src/store/actions.ts                   |  26 +-
 webapp/src/types/docs.ts                      |   9 +
 12 files changed, 1555 insertions(+), 35 deletions(-)
 create mode 100644 webapp/src/components/space_info/space_info_panel.module.scss
 create mode 100644 webapp/src/components/space_info/space_info_panel.tsx
 create mode 100644 webapp/src/components/space_settings_modal/space_settings_modal.module.scss
 create mode 100644 webapp/src/components/space_settings_modal/space_settings_modal.test.tsx
 create mode 100644 webapp/src/components/space_settings_modal/space_settings_modal.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 9a7de24..7edb2b2 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1,4 +1,7 @@
 {
+  "docs.archiveSpace.confirm": "Yes, archive space",
+  "docs.archiveSpace.message": "Are you sure you want to archive the <b>{name}</b> space? Members will lose access until it is restored.",
+  "docs.archiveSpace.title": "Archive {name}",
   "docs.confirmModal.cancel": "Cancel",
   "docs.confirmModal.confirm": "Confirm",
   "docs.createSpace.cancel": "Cancel",
@@ -94,6 +97,12 @@
   "docs.space.membersButton": "Members",
   "docs.space.membersOverflow": "+{count}",
   "docs.space.menu": "Space options",
+  "docs.space.menu.archive": "Archive space",
+  "docs.space.menu.copyLink": "Copy link",
+  "docs.space.menu.info": "Space info",
+  "docs.space.menu.leave": "Leave space",
+  "docs.space.menu.members": "Members",
+  "docs.space.menu.settings": "Space settings",
   "docs.space.more": "More actions",
   "docs.space.pages": "Pages",
   "docs.space.pages.toggle": "Toggle page tree",
@@ -102,6 +111,52 @@
   "docs.space.stat.pages": "Pages",
   "docs.space.stat.views": "Views",
   "docs.space.updated": "Updated {relative}",
+  "docs.spaceInfo.close": "Close info",
+  "docs.spaceInfo.created": "Created",
+  "docs.spaceInfo.description": "Description",
+  "docs.spaceInfo.descriptionPlaceholder": "Add a space description",
+  "docs.spaceInfo.handle": "@{username}",
+  "docs.spaceInfo.members": "Members",
+  "docs.spaceInfo.pages": "Pages",
+  "docs.spaceInfo.title": "Space info",
+  "docs.spaceSettings.archive.button": "Archive space",
+  "docs.spaceSettings.archive.confirmBody": "“{title}” and its pages will be archived and members will lose access. This can be undone by an admin.",
+  "docs.spaceSettings.archive.confirmButton": "Archive",
+  "docs.spaceSettings.archive.confirmTitle": "Archive this space?",
+  "docs.spaceSettings.archive.copy": "Archiving removes this space and its pages from the team. Members will lose access. You can ask an admin to restore it later.",
+  "docs.spaceSettings.archive.heading": "Archive space",
+  "docs.spaceSettings.cancel": "Cancel",
+  "docs.spaceSettings.configuration.comingSoon": "Space configuration options are coming soon.",
+  "docs.spaceSettings.configuration.heading": "Configuration",
+  "docs.spaceSettings.info.descriptionHelper": "Describe how this space should be used. This will show when browsing spaces.",
+  "docs.spaceSettings.info.descriptionLabel": "Description",
+  "docs.spaceSettings.info.descriptionPlaceholder": "Enter a description for this space…",
+  "docs.spaceSettings.info.editUrl": "Edit",
+  "docs.spaceSettings.info.heading": "Space info",
+  "docs.spaceSettings.info.landingLabel": "Default landing page",
+  "docs.spaceSettings.info.nameLabel": "Space name",
+  "docs.spaceSettings.info.urlLabel": "Space URL",
+  "docs.spaceSettings.navLabel": "Space settings sections",
+  "docs.spaceSettings.permissions.accessHeading": "Space access",
+  "docs.spaceSettings.permissions.accessLabel": "Space access",
+  "docs.spaceSettings.permissions.externalSharing.comingSoon": "Coming soon",
+  "docs.spaceSettings.permissions.externalSharing.description": "Let people outside the team access this space with a link.",
+  "docs.spaceSettings.permissions.externalSharing.title": "External sharing",
+  "docs.spaceSettings.permissions.handle": "@{username}",
+  "docs.spaceSettings.permissions.peopleHeading": "People and groups with access",
+  "docs.spaceSettings.permissions.private.comingSoon": "Coming soon",
+  "docs.spaceSettings.permissions.private.description": "Only invited members can view this space.",
+  "docs.spaceSettings.permissions.private.title": "Private",
+  "docs.spaceSettings.permissions.public.description": "Anyone in the team can find and view this space.",
+  "docs.spaceSettings.permissions.public.title": "Public",
+  "docs.spaceSettings.permissions.role.admin": "Admin",
+  "docs.spaceSettings.permissions.searchPlaceholder": "Add people, groups or channels",
+  "docs.spaceSettings.save": "Save",
+  "docs.spaceSettings.tab.archive": "Archive space",
+  "docs.spaceSettings.tab.configuration": "Configuration",
+  "docs.spaceSettings.tab.info": "Info",
+  "docs.spaceSettings.tab.permissions": "Permissions",
+  "docs.spaceSettings.title": "Space Settings",
   "docs.switcher.group.recent": "Recent",
   "docs.switcher.group.results": "Spaces and pages",
   "docs.switcher.group.spaces": "Your spaces",
diff --git a/webapp/src/components/space_info/space_info_panel.module.scss b/webapp/src/components/space_info/space_info_panel.module.scss
new file mode 100644
index 0000000..f8e6d2f
--- /dev/null
+++ b/webapp/src/components/space_info/space_info_panel.module.scss
@@ -0,0 +1,166 @@
+.panel {
+    display: flex;
+    flex: 0 0 320px;
+    flex-direction: column;
+    width: 320px;
+    min-height: 0;
+    border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: var(--center-channel-bg);
+}
+
+.header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    height: 48px;
+    padding: 0 8px 0 16px;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+.headerTitle {
+    margin: 0;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.body {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
+    padding: 20px 16px;
+}
+
+.identity {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    line-height: 1;
+}
+
+.spaceTitle {
+    overflow: hidden;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+    text-overflow: ellipsis;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.sectionTitle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+.count {
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-weight: 600;
+}
+
+.description {
+    margin: 0;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    line-height: 20px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.placeholder {
+    margin: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.memberList {
+    display: flex;
+    flex-direction: column;
+}
+
+.memberRow {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 0;
+}
+
+.memberInfo {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: baseline;
+    gap: 6px;
+}
+
+.memberName {
+    overflow: hidden;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memberUsername {
+    overflow: hidden;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.meta {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 0;
+}
+
+.metaRow {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.metaLabel {
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 14px;
+}
+
+.metaValue {
+    margin: 0;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+    text-align: right;
+}
diff --git a/webapp/src/components/space_info/space_info_panel.tsx b/webapp/src/components/space_info/space_info_panel.tsx
new file mode 100644
index 0000000..dcc92b9
--- /dev/null
+++ b/webapp/src/components/space_info/space_info_panel.tsx
@@ -0,0 +1,181 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useSpaceMemberProfiles} from 'hooks/members';
+import {useSpaceStats} from 'hooks/spaces';
+import React from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
+import {Avatar, Timestamp} from 'webapp_globals';
+import type {TimestampUnit} from 'webapp_globals';
+
+import CloseIcon from '@mattermost/compass-icons/components/close';
+
+import {Button} from 'components/form_controls/button';
+
+import type {Space} from 'types/docs';
+
+import styles from './space_info_panel.module.scss';
+
+// Relative "Created …" buckets for the host Timestamp, mirroring the page bar's
+// relative spec but reaching back far enough for an old space.
+const CREATED_TIME_SPEC: TimestampUnit[] = [
+    ['minute', -59],
+    ['hour', -48],
+    ['day', -30],
+    ['month', -12],
+    'year',
+];
+
+type Props = {
+    space: Space;
+    onClose: () => void;
+};
+
+// Read-only right-hand panel mirroring core's Channel Info RHS: a header with a
+// close control over sections for the space identity, its description, its
+// members, and a small meta area. Editing lives in Space Settings, so nothing
+// here mutates the space.
+const SpaceInfoPanel = ({space, onClose}: Props) => {
+    const {formatMessage} = useIntl();
+    const {pageCount, memberCount} = useSpaceStats(space.id);
+    const members = useSpaceMemberProfiles(space.id);
+
+    const closeLabel = formatMessage({id: 'docs.spaceInfo.close', defaultMessage: 'Close info'});
+
+    // Timestamp's `style` is a narrow/short/long format variant, not a DOM style object.
+    /* eslint-disable react/style-prop-object */
+    const createdRelative = Timestamp ? (
+        <Timestamp
+            value={space.create_at}
+            units={CREATED_TIME_SPEC}
+            useTime={false}
+            style='long'
+        />
+    ) : null;
+    /* eslint-enable react/style-prop-object */
+
+    return (
+        <aside
+            className={styles.panel}
+            aria-label={formatMessage({id: 'docs.spaceInfo.title', defaultMessage: 'Space info'})}
+        >
+            <div className={styles.header}>
+                <h2 className={styles.headerTitle}>
+                    <FormattedMessage
+                        id='docs.spaceInfo.title'
+                        defaultMessage='Space info'
+                    />
+                </h2>
+                <Button
+                    type='button'
+                    emphasis='quaternary'
+                    size='sm'
+                    className='btn-icon'
+                    aria-label={closeLabel}
+                    onClick={onClose}
+                >
+                    <CloseIcon size={18}/>
+                </Button>
+            </div>
+
+            <div className={styles.body}>
+                <div className={styles.identity}>
+                    <span
+                        className={styles.icon}
+                        aria-hidden={true}
+                    >
+                        <SpaceIcon
+                            space={space}
+                            size={40}
+                        />
+                    </span>
+                    <span className={styles.spaceTitle}>{space.title}</span>
+                </div>
+
+                <section className={styles.section}>
+                    <h3 className={styles.sectionTitle}>
+                        <FormattedMessage
+                            id='docs.spaceInfo.description'
+                            defaultMessage='Description'
+                        />
+                    </h3>
+                    {space.description ? (
+                        <p className={styles.description}>{space.description}</p>
+                    ) : (
+                        <p className={styles.placeholder}>
+                            <FormattedMessage
+                                id='docs.spaceInfo.descriptionPlaceholder'
+                                defaultMessage='Add a space description'
+                            />
+                        </p>
+                    )}
+                </section>
+
+                <section className={styles.section}>
+                    <h3 className={styles.sectionTitle}>
+                        <FormattedMessage
+                            id='docs.spaceInfo.members'
+                            defaultMessage='Members'
+                        />
+                        <span className={styles.count}>{memberCount}</span>
+                    </h3>
+                    <div className={styles.memberList}>
+                        {members.map((member) => (
+                            <div
+                                key={member.id}
+                                className={styles.memberRow}
+                            >
+                                <Avatar
+                                    url={member.avatarUrl}
+                                    username={member.username}
+                                    size='sm'
+                                    name=''
+                                />
+                                <span className={styles.memberInfo}>
+                                    <span className={styles.memberName}>{member.displayName}</span>
+                                    {member.username && (
+                                        <span className={styles.memberUsername}>
+                                            <FormattedMessage
+                                                id='docs.spaceInfo.handle'
+                                                defaultMessage='@{username}'
+                                                values={{username: member.username}}
+                                            />
+                                        </span>
+                                    )}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+
+                <section className={styles.section}>
+                    <dl className={styles.meta}>
+                        <div className={styles.metaRow}>
+                            <dt className={styles.metaLabel}>
+                                <FormattedMessage
+                                    id='docs.spaceInfo.pages'
+                                    defaultMessage='Pages'
+                                />
+                            </dt>
+                            <dd className={styles.metaValue}>{pageCount}</dd>
+                        </div>
+                        {createdRelative && (
+                            <div className={styles.metaRow}>
+                                <dt className={styles.metaLabel}>
+                                    <FormattedMessage
+                                        id='docs.spaceInfo.created'
+                                        defaultMessage='Created'
+                                    />
+                                </dt>
+                                <dd className={styles.metaValue}>{createdRelative}</dd>
+                            </div>
+                        )}
+                    </dl>
+                </section>
+            </div>
+        </aside>
+    );
+};
+
+export default SpaceInfoPanel;
diff --git a/webapp/src/components/space_settings_modal/space_settings_modal.module.scss b/webapp/src/components/space_settings_modal/space_settings_modal.module.scss
new file mode 100644
index 0000000..8f52eba
--- /dev/null
+++ b/webapp/src/components/space_settings_modal/space_settings_modal.module.scss
@@ -0,0 +1,245 @@
+.modal {
+    width: 720px;
+    max-width: calc(100vw - 48px);
+}
+
+.subtitle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.subtitleIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.body {
+    display: flex;
+    min-height: 440px;
+    overflow: hidden;
+}
+
+.nav {
+    display: flex;
+    flex: 0 0 208px;
+    flex-direction: column;
+    gap: 2px;
+    padding: 16px 12px;
+    border-right: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+.navItem {
+    justify-content: flex-start;
+    width: 100%;
+    gap: 10px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-weight: 600;
+    text-align: left;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}
+
+.navItemActive {
+    background: rgba(var(--button-bg-rgb), 0.08);
+    color: var(--button-bg);
+
+    &:hover {
+        background: rgba(var(--button-bg-rgb), 0.12);
+    }
+}
+
+.navItemDestructive {
+    color: var(--error-text);
+
+    &:hover {
+        background: rgba(var(--error-text-color-rgb), 0.08);
+    }
+}
+
+.navLabel {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.pane {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px 32px;
+    overflow-y: auto;
+}
+
+.heading {
+    margin: 0;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.fieldLabel {
+    margin-bottom: -8px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.helper {
+    margin-top: -8px;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 12px;
+    line-height: 16px;
+}
+
+.urlRow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: rgba(var(--center-channel-color-rgb), 0.04);
+}
+
+.urlText {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.selectStub {
+    justify-content: space-between;
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-weight: 600;
+}
+
+.selectStubLabel {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.error {
+    color: var(--error-text);
+    font-size: 13px;
+}
+
+.searchStub {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: rgba(var(--center-channel-color-rgb), 0.04);
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-size: 14px;
+}
+
+.memberList {
+    display: flex;
+    flex-direction: column;
+}
+
+.memberRow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 0;
+}
+
+.memberInfo {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: baseline;
+    gap: 6px;
+}
+
+.memberName {
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.memberUsername {
+    overflow: hidden;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.roleTrigger {
+    gap: 4px;
+    color: var(--link-color);
+    font-weight: 600;
+}
+
+.toggleRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 12px 0;
+    border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+.toggleText {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.toggleTitle {
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.comingSoon {
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.archiveCard {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 16px;
+    border: 1px solid rgba(var(--error-text-color-rgb), 0.24);
+    border-radius: 4px;
+    background: rgba(var(--error-text-color-rgb), 0.04);
+}
+
+.archiveCopy {
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 14px;
+    line-height: 20px;
+}
diff --git a/webapp/src/components/space_settings_modal/space_settings_modal.test.tsx b/webapp/src/components/space_settings_modal/space_settings_modal.test.tsx
new file mode 100644
index 0000000..2aeb26e
--- /dev/null
+++ b/webapp/src/components/space_settings_modal/space_settings_modal.test.tsx
@@ -0,0 +1,92 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import {deleteSpace, updateSpace} from 'store/actions';
+import {makeSpace} from 'store/test_fixtures';
+
+import SpaceSettingsModal from './space_settings_modal';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+const mockGoHome = jest.fn();
+
+jest.mock('store/actions', () => ({
+    updateSpace: jest.fn(() => () => Promise.resolve()),
+    deleteSpace: jest.fn(() => () => Promise.resolve()),
+}));
+
+const mockUpdateSpace = updateSpace as jest.Mock;
+const mockDeleteSpace = deleteSpace as jest.Mock;
+
+jest.mock('hooks/navigation', () => ({
+    useDocsNavigation: () => ({
+        goHome: mockGoHome,
+        paths: {space: (id: string) => `/team/spaces/${id}`},
+    }),
+}));
+
+jest.mock('hooks/members', () => ({
+    useSpaceMemberProfiles: () => [],
+}));
+
+const space = makeSpace('space-1', 'Project Avalanche');
+
+describe('SpaceSettingsModal', () => {
+    it('renders the title, space subtitle, and section tabs', () => {
+        renderWithContext(
+            <SpaceSettingsModal
+                space={space}
+                onClose={jest.fn()}
+            />,
+        );
+
+        expect(screen.getByRole('heading', {name: 'Space Settings'})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: /Info/})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: /Permissions/})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: /Configuration/})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: /Archive space/})).toBeInTheDocument();
+    });
+
+    it('keeps Save disabled until a field changes, then dispatches updateSpace', () => {
+        const onClose = jest.fn();
+        renderWithContext(
+            <SpaceSettingsModal
+                space={space}
+                onClose={onClose}
+            />,
+        );
+
+        const save = screen.getByRole('button', {name: 'Save'});
+        expect(save).toBeDisabled();
+
+        fireEvent.change(screen.getByLabelText('Space name'), {target: {value: 'Renamed'}});
+        expect(save).toBeEnabled();
+
+        fireEvent.click(save);
+        expect(mockUpdateSpace).toHaveBeenCalledWith('space-1', {title: 'Renamed', description: ''});
+    });
+
+    it('archives the space through a confirm dialog', async () => {
+        const onClose = jest.fn();
+        renderWithContext(
+            <SpaceSettingsModal
+                space={space}
+                onClose={onClose}
+                initialTab='archive'
+            />,
+        );
+
+        // The left-nav tab and the in-card action both read "Archive space";
+        // the card button is the later one in DOM order.
+        const archiveButtons = screen.getAllByRole('button', {name: 'Archive space'});
+        fireEvent.click(archiveButtons[archiveButtons.length - 1]);
+        fireEvent.click(screen.getByRole('button', {name: 'Archive'}));
+
+        expect(mockDeleteSpace).toHaveBeenCalledWith('space-1');
+        await Promise.resolve();
+        expect(mockGoHome).toHaveBeenCalled();
+    });
+});
diff --git a/webapp/src/components/space_settings_modal/space_settings_modal.tsx b/webapp/src/components/space_settings_modal/space_settings_modal.tsx
new file mode 100644
index 0000000..63f7e38
--- /dev/null
+++ b/webapp/src/components/space_settings_modal/space_settings_modal.tsx
@@ -0,0 +1,514 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import {useSpaceMemberProfiles} from 'hooks/members';
+import {useDocsNavigation} from 'hooks/navigation';
+import {useAppDispatch} from 'hooks/redux';
+import React, {useMemo, useState} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
+import {Avatar} from 'webapp_globals';
+
+import ArchiveOutlineIcon from '@mattermost/compass-icons/components/archive-outline';
+import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
+import CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';
+import GlobeIcon from '@mattermost/compass-icons/components/globe';
+import InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';
+import LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';
+import type IconProps from '@mattermost/compass-icons/components/props';
+import ShieldOutlineIcon from '@mattermost/compass-icons/components/shield-outline';
+
+import {deleteSpace, updateSpace} from 'store/actions';
+
+import ConfirmModal from 'components/confirm_modal/confirm_modal';
+import {Button, DestructiveButton, PrimaryButton, TertiaryButton} from 'components/form_controls/button';
+import PublicPrivateSelector from 'components/form_controls/public_private_selector';
+import TextArea from 'components/form_controls/text_area';
+import TextInput from 'components/form_controls/text_input';
+import GenericModal from 'components/generic_modal/generic_modal';
+
+import type {Space} from 'types/docs';
+
+import styles from './space_settings_modal.module.scss';
+
+export type SpaceSettingsTab = 'info' | 'permissions' | 'configuration' | 'archive';
+
+type Props = {
+    space: Space;
+    onClose: () => void;
+    initialTab?: SpaceSettingsTab;
+};
+
+type TabDef = {
+    id: SpaceSettingsTab;
+    label: string;
+    icon: React.ComponentType<IconProps>;
+    destructive?: boolean;
+};
+
+const SpaceSettingsModal = ({space, onClose, initialTab = 'info'}: Props) => {
+    const {formatMessage} = useIntl();
+    const {paths} = useDocsNavigation();
+    const [activeTab, setActiveTab] = useState<SpaceSettingsTab>(initialTab);
+
+    const tabs: TabDef[] = [
+        {id: 'info', label: formatMessage({id: 'docs.spaceSettings.tab.info', defaultMessage: 'Info'}), icon: InformationOutlineIcon},
+        {id: 'permissions', label: formatMessage({id: 'docs.spaceSettings.tab.permissions', defaultMessage: 'Permissions'}), icon: ShieldOutlineIcon},
+        {id: 'configuration', label: formatMessage({id: 'docs.spaceSettings.tab.configuration', defaultMessage: 'Configuration'}), icon: CogOutlineIcon},
+        {id: 'archive', label: formatMessage({id: 'docs.spaceSettings.tab.archive', defaultMessage: 'Archive space'}), icon: ArchiveOutlineIcon, destructive: true},
+    ];
+
+    const info = useInfoTab(space, onClose);
+
+    const footer = activeTab === 'info' ? (
+        <>
+            <TertiaryButton
+                type='button'
+                onClick={onClose}
+            >
+                <FormattedMessage
+                    id='docs.spaceSettings.cancel'
+                    defaultMessage='Cancel'
+                />
+            </TertiaryButton>
+            <PrimaryButton
+                type='button'
+                disabled={!info.canSave}
+                onClick={info.save}
+            >
+                <FormattedMessage
+                    id='docs.spaceSettings.save'
+                    defaultMessage='Save'
+                />
+            </PrimaryButton>
+        </>
+    ) : undefined;
+
+    const subtitle = (
+        <span className={styles.subtitle}>
+            <span
+                className={styles.subtitleIcon}
+                aria-hidden={true}
+            >
+                <SpaceIcon
+                    space={space}
+                    size={16}
+                />
+            </span>
+            {space.title}
+        </span>
+    );
+
+    return (
+        <GenericModal
+            className={styles.modal}
+            title={formatMessage({id: 'docs.spaceSettings.title', defaultMessage: 'Space Settings'})}
+            ariaLabel={formatMessage({id: 'docs.spaceSettings.title', defaultMessage: 'Space Settings'})}
+            headerContent={subtitle}
+            onClose={onClose}
+            footer={footer}
+        >
+            <div className={styles.body}>
+                <nav
+                    className={styles.nav}
+                    aria-label={formatMessage({id: 'docs.spaceSettings.navLabel', defaultMessage: 'Space settings sections'})}
+                >
+                    {tabs.map((tab) => {
+                        const Icon = tab.icon;
+                        const active = tab.id === activeTab;
+                        return (
+                            <Button
+                                key={tab.id}
+                                type='button'
+                                emphasis='quaternary'
+                                size='sm'
+                                aria-current={active}
+                                className={classNames(styles.navItem, {
+                                    [styles.navItemActive]: active,
+                                    [styles.navItemDestructive]: tab.destructive && !active,
+                                })}
+                                onClick={() => setActiveTab(tab.id)}
+                            >
+                                <Icon size={16}/>
+                                <span className={styles.navLabel}>{tab.label}</span>
+                            </Button>
+                        );
+                    })}
+                </nav>
+
+                <div
+                    className={styles.pane}
+                    role='tabpanel'
+                >
+                    {activeTab === 'info' && (
+                        <InfoTab
+                            space={space}
+                            info={info}
+                            url={`${window.location.origin}${paths.space(space.id)}`}
+                        />
+                    )}
+                    {activeTab === 'permissions' && <PermissionsTab space={space}/>}
+                    {activeTab === 'configuration' && <ConfigurationTab/>}
+                    {activeTab === 'archive' && (
+                        <ArchiveTab
+                            space={space}
+                            onClose={onClose}
+                        />
+                    )}
+                </div>
+            </div>
+        </GenericModal>
+    );
+};
+
+type InfoTabState = {
+    name: string;
+    setName: (value: string) => void;
+    description: string;
+    setDescription: (value: string) => void;
+    error?: string;
+    canSave: boolean;
+    save: () => void;
+};
+
+// Owns the editable Info-tab fields and the save flow so the footer (rendered by
+// the modal shell) and the pane share one source of truth.
+function useInfoTab(space: Space, onClose: () => void): InfoTabState {
+    const dispatch = useAppDispatch();
+    const [name, setName] = useState(space.title);
+    const [description, setDescription] = useState(space.description ?? '');
+    const [error, setError] = useState<string>();
+    const [saving, setSaving] = useState(false);
+
+    const dirty = name.trim() !== space.title || description.trim() !== (space.description ?? '');
+    const canSave = dirty && Boolean(name.trim()) && !saving;
+
+    const save = async () => {
+        if (!canSave) {
+            return;
+        }
+        setSaving(true);
+        setError(undefined);
+        try {
+            await dispatch(updateSpace(space.id, {title: name.trim(), description: description.trim()}));
+            onClose();
+        } catch (err) {
+            setSaving(false);
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    };
+
+    return {name, setName, description, setDescription, error, canSave, save};
+}
+
+const InfoTab = ({space, info, url}: {space: Space; info: InfoTabState; url: string}) => {
+    const {formatMessage} = useIntl();
+
+    return (
+        <>
+            <h2 className={styles.heading}>
+                <FormattedMessage
+                    id='docs.spaceSettings.info.heading'
+                    defaultMessage='Space info'
+                />
+            </h2>
+
+            <TextInput
+                id='docs-space-settings-name'
+                label={formatMessage({id: 'docs.spaceSettings.info.nameLabel', defaultMessage: 'Space name'})}
+                value={info.name}
+                onChange={info.setName}
+                maxLength={64}
+                leading={(
+                    <SpaceIcon
+                        space={space}
+                        size={18}
+                    />
+                )}
+            />
+
+            <div className={styles.fieldLabel}>
+                <FormattedMessage
+                    id='docs.spaceSettings.info.urlLabel'
+                    defaultMessage='Space URL'
+                />
+            </div>
+            <div className={styles.urlRow}>
+                <span className={styles.urlText}>{url}</span>
+                <Button
+                    type='button'
+                    emphasis='quaternary'
+                    size='sm'
+                    disabled={true}
+                    aria-disabled={true}
+                >
+                    <FormattedMessage
+                        id='docs.spaceSettings.info.editUrl'
+                        defaultMessage='Edit'
+                    />
+                </Button>
+            </div>
+
+            <div className={styles.fieldLabel}>
+                <FormattedMessage
+                    id='docs.spaceSettings.info.descriptionLabel'
+                    defaultMessage='Description'
+                />
+            </div>
+            <TextArea
+                id='docs-space-settings-description'
+                label={formatMessage({id: 'docs.spaceSettings.info.descriptionPlaceholder', defaultMessage: 'Enter a description for this space…'})}
+                value={info.description}
+                onChange={info.setDescription}
+                maxLength={1024}
+                rows={3}
+            />
+            <div className={styles.helper}>
+                <FormattedMessage
+                    id='docs.spaceSettings.info.descriptionHelper'
+                    defaultMessage='Describe how this space should be used. This will show when browsing spaces.'
+                />
+            </div>
+
+            <div className={styles.fieldLabel}>
+                <FormattedMessage
+                    id='docs.spaceSettings.info.landingLabel'
+                    defaultMessage='Default landing page'
+                />
+            </div>
+            <Button
+                type='button'
+                emphasis='quaternary'
+                size='sm'
+                disabled={true}
+                aria-disabled={true}
+                className={styles.selectStub}
+            >
+                <span className={styles.selectStubLabel}>
+                    <SpaceIcon
+                        space={space}
+                        size={16}
+                    />
+                    {space.title}
+                </span>
+                <ChevronDownIcon size={16}/>
+            </Button>
+
+            {info.error && <div className={styles.error}>{info.error}</div>}
+        </>
+    );
+};
+
+const PermissionsTab = ({space}: {space: Space}) => {
+    const {formatMessage} = useIntl();
+    const members = useSpaceMemberProfiles(space.id);
+
+    // Scaffolding: view-access and per-member capabilities land with PR #10, so
+    // the selector, search and role dropdowns are visual only.
+    const accessOptions = useMemo(() => [
+        {
+            value: 'public',
+            icon: <GlobeIcon size={20}/>,
+            title: formatMessage({id: 'docs.spaceSettings.permissions.public.title', defaultMessage: 'Public'}),
+            description: formatMessage({id: 'docs.spaceSettings.permissions.public.description', defaultMessage: 'Anyone in the team can find and view this space.'}),
+        },
+        {
+            value: 'private',
+            icon: <LockOutlineIcon size={20}/>,
+            title: formatMessage({id: 'docs.spaceSettings.permissions.private.title', defaultMessage: 'Private'}),
+            description: formatMessage({id: 'docs.spaceSettings.permissions.private.description', defaultMessage: 'Only invited members can view this space.'}),
+            disabled: true,
+            disabledReason: formatMessage({id: 'docs.spaceSettings.permissions.private.comingSoon', defaultMessage: 'Coming soon'}),
+        },
+    ], [formatMessage]);
+
+    return (
+        <>
+            <h2 className={styles.heading}>
+                <FormattedMessage
+                    id='docs.spaceSettings.permissions.accessHeading'
+                    defaultMessage='Space access'
+                />
+            </h2>
+            <PublicPrivateSelector
+                ariaLabel={formatMessage({id: 'docs.spaceSettings.permissions.accessLabel', defaultMessage: 'Space access'})}
+                options={accessOptions}
+                value='public'
+                onChange={() => {}}
+            />
+
+            <h2 className={styles.heading}>
+                <FormattedMessage
+                    id='docs.spaceSettings.permissions.peopleHeading'
+                    defaultMessage='People and groups with access'
+                />
+            </h2>
+            <div
+                className={styles.searchStub}
+                aria-disabled={true}
+            >
+                <FormattedMessage
+                    id='docs.spaceSettings.permissions.searchPlaceholder'
+                    defaultMessage='Add people, groups or channels'
+                />
+            </div>
+            <div className={styles.memberList}>
+                {members.map((member) => (
+                    <div
+                        key={member.id}
+                        className={styles.memberRow}
+                    >
+                        <Avatar
+                            url={member.avatarUrl}
+                            username={member.username}
+                            size='md'
+                            name=''
+                        />
+                        <span className={styles.memberInfo}>
+                            <span className={styles.memberName}>{member.displayName}</span>
+                            {member.username && (
+                                <span className={styles.memberUsername}>
+                                    <FormattedMessage
+                                        id='docs.spaceSettings.permissions.handle'
+                                        defaultMessage='@{username}'
+                                        values={{username: member.username}}
+                                    />
+                                </span>
+                            )}
+                        </span>
+                        <Button
+                            type='button'
+                            emphasis='quaternary'
+                            size='sm'
+                            disabled={true}
+                            aria-disabled={true}
+                            className={styles.roleTrigger}
+                        >
+                            <FormattedMessage
+                                id='docs.spaceSettings.permissions.role.admin'
+                                defaultMessage='Admin'
+                            />
+                            <ChevronDownIcon size={16}/>
+                        </Button>
+                    </div>
+                ))}
+            </div>
+
+            <div className={styles.toggleRow}>
+                <span className={styles.toggleText}>
+                    <span className={styles.toggleTitle}>
+                        <FormattedMessage
+                            id='docs.spaceSettings.permissions.externalSharing.title'
+                            defaultMessage='External sharing'
+                        />
+                    </span>
+                    <span className={styles.helper}>
+                        <FormattedMessage
+                            id='docs.spaceSettings.permissions.externalSharing.description'
+                            defaultMessage='Let people outside the team access this space with a link.'
+                        />
+                    </span>
+                </span>
+                <Button
+                    type='button'
+                    emphasis='quaternary'
+                    size='sm'
+                    disabled={true}
+                    aria-disabled={true}
+                >
+                    <FormattedMessage
+                        id='docs.spaceSettings.permissions.externalSharing.comingSoon'
+                        defaultMessage='Coming soon'
+                    />
+                </Button>
+            </div>
+        </>
+    );
+};
+
+const ConfigurationTab = () => (
+    <>
+        <h2 className={styles.heading}>
+            <FormattedMessage
+                id='docs.spaceSettings.configuration.heading'
+                defaultMessage='Configuration'
+            />
+        </h2>
+        <p className={styles.comingSoon}>
+            <FormattedMessage
+                id='docs.spaceSettings.configuration.comingSoon'
+                defaultMessage='Space configuration options are coming soon.'
+            />
+        </p>
+    </>
+);
+
+const ArchiveTab = ({space, onClose}: {space: Space; onClose: () => void}) => {
+    const {formatMessage} = useIntl();
+    const dispatch = useAppDispatch();
+    const {goHome} = useDocsNavigation();
+    const [confirming, setConfirming] = useState(false);
+    const [error, setError] = useState<string>();
+
+    const archive = async () => {
+        setError(undefined);
+        try {
+            await dispatch(deleteSpace(space.id));
+            setConfirming(false);
+            onClose();
+            goHome();
+        } catch (err) {
+            setConfirming(false);
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    };
+
+    return (
+        <>
+            <h2 className={styles.heading}>
+                <FormattedMessage
+                    id='docs.spaceSettings.archive.heading'
+                    defaultMessage='Archive space'
+                />
+            </h2>
+            <div className={styles.archiveCard}>
+                <p className={styles.archiveCopy}>
+                    <FormattedMessage
+                        id='docs.spaceSettings.archive.copy'
+                        defaultMessage='Archiving removes this space and its pages from the team. Members will lose access. You can ask an admin to restore it later.'
+                    />
+                </p>
+                <DestructiveButton
+                    type='button'
+                    onClick={() => setConfirming(true)}
+                >
+                    <ArchiveOutlineIcon size={16}/>
+                    <FormattedMessage
+                        id='docs.spaceSettings.archive.button'
+                        defaultMessage='Archive space'
+                    />
+                </DestructiveButton>
+                {error && <div className={styles.error}>{error}</div>}
+            </div>
+
+            {confirming && (
+                <ConfirmModal
+                    isConfirmDestructive={true}
+                    title={formatMessage({id: 'docs.spaceSettings.archive.confirmTitle', defaultMessage: 'Archive this space?'})}
+                    confirmButtonText={formatMessage({id: 'docs.spaceSettings.archive.confirmButton', defaultMessage: 'Archive'})}
+                    onConfirm={archive}
+                    onCancel={() => setConfirming(false)}
+                >
+                    <FormattedMessage
+                        id='docs.spaceSettings.archive.confirmBody'
+                        defaultMessage='“{title}” and its pages will be archived and members will lose access. This can be undone by an admin.'
+                        values={{title: space.title}}
+                    />
+                </ConfirmModal>
+            )}
+        </>
+    );
+};
+
+export default SpaceSettingsModal;
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_title_bar.tsx
index c667688..8103178 100644
--- a/webapp/src/components/space_view/space_title_bar.tsx
+++ b/webapp/src/components/space_view/space_title_bar.tsx
@@ -2,35 +2,162 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React, {useState} from 'react';
+import {useDocsNavigation} from 'hooks/navigation';
+import {useAppDispatch} from 'hooks/redux';
+import React, {useCallback, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
+import {copyToClipboard} from 'utils/clipboard';
 import {SpaceIcon} from 'utils/space_icon';
 
 import AccountMultipleOutlineIcon from '@mattermost/compass-icons/components/account-multiple-outline';
+import ArchiveOutlineIcon from '@mattermost/compass-icons/components/archive-outline';
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
+import CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';
+import ExitToAppIcon from '@mattermost/compass-icons/components/exit-to-app';
 import InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';
+import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
 import ShareVariantOutlineIcon from '@mattermost/compass-icons/components/share-variant-outline';
 import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
 
+import {deleteSpace, leaveSpace} from 'store/actions';
+import {useSpacePermissions} from 'store/permissions';
+
+import ConfirmModal from 'components/confirm_modal/confirm_modal';
 import {Button, PrimaryButton} from 'components/form_controls/button';
+import Menu from 'components/menu/menu';
+import type {MenuItemSpec} from 'components/menu/menu_types';
 import ShareSpaceModal from 'components/share_space_modal/share_space_modal';
 
 import type {Space} from 'types/docs';
 
 import styles from './space_title_bar.module.scss';
 
-// The controls here (favorite, space menu, details, share) are visual
-// scaffolding — wired in later passes. Icon buttons use the shared Button with
-// the compass `btn-icon` treatment (quaternary + square), the same as core.
-const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}) => {
+type Props = {
+    space: Space;
+    memberCount: number;
+    infoOpen: boolean;
+    onToggleInfo: () => void;
+    onOpenSettings: () => void;
+};
+
+const SpaceTitleBar = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings}: Props) => {
     const {formatMessage} = useIntl();
+    const dispatch = useAppDispatch();
+    const {paths, spaceId, goHome} = useDocsNavigation();
+    const {canManageMembers} = useSpacePermissions(space.id);
+
     const [shareOpen, setShareOpen] = useState(false);
+    const [confirmLeaveOpen, setConfirmLeaveOpen] = useState(false);
+    const [confirmArchiveOpen, setConfirmArchiveOpen] = useState(false);
 
     const favoriteLabel = formatMessage({id: 'docs.space.favorite', defaultMessage: 'Favorite this space'});
     const menuLabel = formatMessage({id: 'docs.space.menu', defaultMessage: 'Space options'});
-    const detailsLabel = formatMessage({id: 'docs.space.details', defaultMessage: 'Space details'});
+    const infoLabel = formatMessage({id: 'docs.space.details', defaultMessage: 'Space details'});
     const membersLabel = formatMessage({id: 'docs.space.membersButton', defaultMessage: 'Members'});
 
+    const copyLink = useCallback(() => {
+        copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
+    }, [paths, space.id]);
+
+    // Navigate home only when we just acted on the space being viewed, and only
+    // after the server confirms (leaving the last authorized member is rejected).
+    const confirmLeave = useCallback(async () => {
+        try {
+            await dispatch(leaveSpace(space.id));
+            if (spaceId === space.id) {
+                goHome();
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to leave space', error);
+        }
+        setConfirmLeaveOpen(false);
+    }, [dispatch, space.id, spaceId, goHome]);
+
+    const confirmArchive = useCallback(async () => {
+        try {
+            await dispatch(deleteSpace(space.id));
+            if (spaceId === space.id) {
+                goHome();
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to archive space', error);
+        }
+        setConfirmArchiveOpen(false);
+    }, [dispatch, space.id, spaceId, goHome]);
+
+    const items: MenuItemSpec[] = [
+        {
+            id: 'info',
+            label: (
+                <FormattedMessage
+                    id='docs.space.menu.info'
+                    defaultMessage='Space info'
+                />
+            ),
+            leadingIcon: <InformationOutlineIcon size={18}/>,
+            onClick: onToggleInfo,
+        },
+        {
+            id: 'members',
+            label: (
+                <FormattedMessage
+                    id='docs.space.menu.members'
+                    defaultMessage='Members'
+                />
+            ),
+            leadingIcon: <AccountMultipleOutlineIcon size={18}/>,
+            onClick: () => setShareOpen(true),
+        },
+        {
+            id: 'copy-link',
+            label: (
+                <FormattedMessage
+                    id='docs.space.menu.copyLink'
+                    defaultMessage='Copy link'
+                />
+            ),
+            leadingIcon: <LinkVariantIcon size={18}/>,
+            onClick: copyLink,
+        },
+        ...(canManageMembers ? [{
+            id: 'settings',
+            label: (
+                <FormattedMessage
+                    id='docs.space.menu.settings'
+                    defaultMessage='Space settings'
+                />
+            ),
+            leadingIcon: <CogOutlineIcon size={18}/>,
+            onClick: onOpenSettings,
+        }] : []),
+        {
+            id: 'leave',
+            label: (
+                <FormattedMessage
+                    id='docs.space.menu.leave'
+                    defaultMessage='Leave space'
+                />
+            ),
+            leadingIcon: <ExitToAppIcon size={18}/>,
+            hasDivider: true,
+            onClick: () => setConfirmLeaveOpen(true),
+        },
+        ...(canManageMembers ? [{
+            id: 'archive',
+            label: (
+                <FormattedMessage
+                    id='docs.space.menu.archive'
+                    defaultMessage='Archive space'
+                />
+            ),
+            leadingIcon: <ArchiveOutlineIcon size={18}/>,
+            isDestructive: true,
+            onClick: () => setConfirmArchiveOpen(true),
+        }] : []),
+    ];
+
     return (
         <div className={styles.bar}>
             <div className={styles.left}>
@@ -43,28 +170,35 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
                 >
                     <StarOutlineIcon size={18}/>
                 </Button>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className={styles.titleTrigger}
-                    aria-label={menuLabel}
-                >
-                    <span
-                        className={styles.emoji}
-                        aria-hidden={true}
-                    >
-                        <SpaceIcon
-                            space={space}
-                            size={18}
-                        />
-                    </span>
-                    <span className={styles.title}>{space.title}</span>
-                    <ChevronDownIcon
-                        className={styles.chevron}
-                        size={16}
-                    />
-                </Button>
+                <Menu
+                    ariaLabel={menuLabel}
+                    tooltip={menuLabel}
+                    items={items}
+                    trigger={(
+                        <Button
+                            type='button'
+                            emphasis='quaternary'
+                            size='sm'
+                            className={styles.titleTrigger}
+                            aria-label={menuLabel}
+                        >
+                            <span
+                                className={styles.emoji}
+                                aria-hidden={true}
+                            >
+                                <SpaceIcon
+                                    space={space}
+                                    size={18}
+                                />
+                            </span>
+                            <span className={styles.title}>{space.title}</span>
+                            <ChevronDownIcon
+                                className={styles.chevron}
+                                size={16}
+                            />
+                        </Button>
+                    )}
+                />
                 <Button
                     type='button'
                     emphasis='quaternary'
@@ -84,7 +218,9 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
                     emphasis='quaternary'
                     size='sm'
                     className='btn-icon'
-                    aria-label={detailsLabel}
+                    aria-label={infoLabel}
+                    aria-pressed={infoOpen}
+                    onClick={onToggleInfo}
                 >
                     <InformationOutlineIcon size={18}/>
                 </Button>
@@ -107,6 +243,64 @@ const SpaceTitleBar = ({space, memberCount}: {space: Space; memberCount: number}
                     onClose={() => setShareOpen(false)}
                 />
             )}
+            {confirmLeaveOpen && (
+                <ConfirmModal
+                    title={(
+                        <FormattedMessage
+                            id='docs.leaveSpace.title'
+                            defaultMessage='Leave {name}'
+                            values={{name: space.title}}
+                        />
+                    )}
+                    confirmButtonText={(
+                        <FormattedMessage
+                            id='docs.leaveSpace.confirm'
+                            defaultMessage='Yes, leave space'
+                        />
+                    )}
+                    isConfirmDestructive={true}
+                    onConfirm={confirmLeave}
+                    onCancel={() => setConfirmLeaveOpen(false)}
+                >
+                    <FormattedMessage
+                        id='docs.leaveSpace.message'
+                        defaultMessage='Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.'
+                        values={{
+                            name: space.title,
+                            b: (chunks) => <b>{chunks}</b>,
+                        }}
+                    />
+                </ConfirmModal>
+            )}
+            {confirmArchiveOpen && (
+                <ConfirmModal
+                    title={(
+                        <FormattedMessage
+                            id='docs.archiveSpace.title'
+                            defaultMessage='Archive {name}'
+                            values={{name: space.title}}
+                        />
+                    )}
+                    confirmButtonText={(
+                        <FormattedMessage
+                            id='docs.archiveSpace.confirm'
+                            defaultMessage='Yes, archive space'
+                        />
+                    )}
+                    isConfirmDestructive={true}
+                    onConfirm={confirmArchive}
+                    onCancel={() => setConfirmArchiveOpen(false)}
+                >
+                    <FormattedMessage
+                        id='docs.archiveSpace.message'
+                        defaultMessage='Are you sure you want to archive the <b>{name}</b> space? Members will lose access until it is restored.'
+                        values={{
+                            name: space.title,
+                            b: (chunks) => <b>{chunks}</b>,
+                        }}
+                    />
+                </ConfirmModal>
+            )}
         </div>
     );
 };
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index 635e22e..81bb470 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -5,6 +5,9 @@ import {useSpaceStats} from 'hooks/spaces';
 import React, {useCallback, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import SpaceInfoPanel from 'components/space_info/space_info_panel';
+import SpaceSettingsModal from 'components/space_settings_modal/space_settings_modal';
+
 import type {Space} from 'types/docs';
 
 import PageBar from './page_bar';
@@ -14,19 +17,27 @@ import SpaceTitleBar from './space_title_bar';
 import styles from './space_view.module.scss';
 
 // Main content for a routed space: the space title bar spans the full width; a
-// flex row holds the page tree panel and the content column (page bar over the
-// front-door hero). The page body is a placeholder until the editor is mounted.
+// flex row holds the page tree panel, the content column (page bar over the
+// front-door hero), and the optional space info panel as a right column. The
+// page body is a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
     const {pageCount, memberCount} = useSpaceStats(space.id);
     const [treeOpen, setTreeOpen] = useState(true);
+    const [infoOpen, setInfoOpen] = useState(false);
+    const [settingsOpen, setSettingsOpen] = useState(false);
 
     const togglePages = useCallback(() => setTreeOpen((open) => !open), []);
+    const toggleInfo = useCallback(() => setInfoOpen((open) => !open), []);
+    const openSettings = useCallback(() => setSettingsOpen(true), []);
 
     return (
         <div className={styles.root}>
             <SpaceTitleBar
                 space={space}
                 memberCount={memberCount}
+                infoOpen={infoOpen}
+                onToggleInfo={toggleInfo}
+                onOpenSettings={openSettings}
             />
             <div className={styles.body}>
                 {treeOpen && <PageTreePanel space={space}/>}
@@ -52,7 +63,19 @@ const SpaceView = ({space}: {space: Space}) => {
                         </div>
                     </div>
                 </div>
+                {infoOpen && (
+                    <SpaceInfoPanel
+                        space={space}
+                        onClose={toggleInfo}
+                    />
+                )}
             </div>
+            {settingsOpen && (
+                <SpaceSettingsModal
+                    space={space}
+                    onClose={() => setSettingsOpen(false)}
+                />
+            )}
         </div>
     );
 };
diff --git a/webapp/src/data/api_data_source.ts b/webapp/src/data/api_data_source.ts
index e71b08c..28b39d1 100644
--- a/webapp/src/data/api_data_source.ts
+++ b/webapp/src/data/api_data_source.ts
@@ -3,7 +3,7 @@
 
 import {apiUrl, listAll, restDelete, restGet, restPatch, restPost} from 'client/rest';
 
-import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdateSpacePatch} from 'types/docs';
 
 import type {DocsDataSource} from './docs_data_source';
 
@@ -24,6 +24,15 @@ export const apiDataSource: DocsDataSource = {
         icon: input.icon || undefined,
     }),
 
+    updateSpace: (spaceId, patch: UpdateSpacePatch, expectedUpdateAt) => restPatch<Space>(`${apiUrl()}/spaces/${spaceId}`, {
+        title: patch.title?.trim(),
+        description: patch.description?.trim(),
+        icon: patch.icon,
+        expected_update_at: expectedUpdateAt,
+    }),
+
+    deleteSpace: (spaceId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}`),
+
     removeSpaceMember: (spaceId, userId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}/members/${userId}`),
 
     listSpaceMembers: (spaceId) => listAll<SpaceMember>((query) => `${apiUrl()}/spaces/${spaceId}/members?${query}`),
diff --git a/webapp/src/data/docs_data_source.ts b/webapp/src/data/docs_data_source.ts
index 474dca5..188562b 100644
--- a/webapp/src/data/docs_data_source.ts
+++ b/webapp/src/data/docs_data_source.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdateSpacePatch} from 'types/docs';
 
 // The seam between the store's thunks and the Docs server REST API. The
 // API-backed source implements this over the plugin's /api/v1 routes; the
@@ -24,6 +24,16 @@ export interface DocsDataSource {
     // PR #10's view_access).
     createSpace(teamId: string, input: CreateSpaceInput): Promise<Space>;
 
+    // Patches a space's editable fields (name/description/icon) and returns the
+    // updated space. `expectedUpdateAt` is the space's current update_at for
+    // optimistic concurrency (the server rejects a stale write). Only the
+    // provided fields are sent.
+    updateSpace(spaceId: string, patch: UpdateSpacePatch, expectedUpdateAt: number): Promise<Space>;
+
+    // Archives (soft-deletes) a space. The server rejects when the caller can't
+    // manage the space; the caller surfaces that.
+    deleteSpace(spaceId: string): Promise<void>;
+
     // Removes a member from a space. Leaving a space is removing yourself; the
     // server rejects removing the last authorized member (409).
     removeSpaceMember(spaceId: string, userId: string): Promise<void>;
diff --git a/webapp/src/store/actions.ts b/webapp/src/store/actions.ts
index 520501a..37d48cf 100644
--- a/webapp/src/store/actions.ts
+++ b/webapp/src/store/actions.ts
@@ -6,11 +6,11 @@ import {docsDataSource} from 'data';
 import {getCurrentTeamId, getMyTeams} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
-import type {CreatePageInput, CreateSpaceInput, Page, Space} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, UpdateSpacePatch} from 'types/docs';
 import type {DocsThunkAction} from 'types/store';
 
 import {PageTypes, SpaceTypes} from './action_types';
-import {getPage} from './selectors';
+import {getPage, getSpace} from './selectors';
 
 // Spaces the caller belongs to in the current team (the server scopes the list
 // by backing-channel membership). A failed load leaves the store empty rather
@@ -119,6 +119,28 @@ export function createSpace(input: CreateSpaceInput): DocsThunkAction<Promise<Sp
     };
 }
 
+// Patches a space's editable fields and reconciles the store with the
+// server-returned space. Reads the current update_at for optimistic concurrency
+// (the server rejects a stale write). Rejects on failure so the settings form
+// can surface it and stay open.
+export function updateSpace(spaceId: string, patch: UpdateSpacePatch): DocsThunkAction<Promise<Space>> {
+    return async (dispatch, getState) => {
+        const expectedUpdateAt = getSpace(getState(), spaceId)?.update_at ?? 0;
+        const updated = await docsDataSource.updateSpace(spaceId, patch, expectedUpdateAt);
+        dispatch({type: SpaceTypes.RECEIVED_SPACES, spaces: [updated]});
+        return updated;
+    };
+}
+
+// Archives (soft-deletes) a space and prunes it from the store. Rejects on
+// failure so the caller can surface it.
+export function deleteSpace(spaceId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch) => {
+        await docsDataSource.deleteSpace(spaceId);
+        dispatch({type: SpaceTypes.DELETED_SPACE, spaceId});
+    };
+}
+
 // Leaving a space is removing yourself from its membership. The server rejects
 // removing the last authorized member (409); the caller surfaces that.
 export function leaveSpace(spaceId: string): DocsThunkAction<Promise<void>> {
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index a6470e7..a8a791d 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -41,6 +41,15 @@ export type CreateSpaceInput = {
     icon?: string;
 };
 
+// The editable fields of a space, as sent to the update-space API. Every field
+// is optional so a patch carries only what changed; the server model's
+// concurrency token (expected_update_at) is passed separately.
+export type UpdateSpacePatch = {
+    title?: string;
+    description?: string;
+    icon?: string;
+};
+
 // Mirrors the server model (server/model/page.go). search_text, user_id,
 // last_modified_by, original_id, and props exist on the server model too; add
 // them as the API/editor lands.

From ab1740a2d37bab35f1e9a00e121dd5b5125ff537 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 27 Jul 2026 22:33:21 -0500
Subject: [PATCH 17/68] fix(docs): match core btn-icon interaction states

Neutral toolbar buttons now mirror core's .btn-icon / channel-header icon:
grey base, light-grey hover, light-blue press (:active, declared after
:hover so a hovered press reads blue), and persistent blue when toggled on
(.active). The Info button gets `active` while its panel is open (alongside
aria-pressed) so the toggled state reads deep blue.
---
 .../form_controls/button_neutral.module.scss  | 34 +++++++++++++++----
 .../components/space_view/space_title_bar.tsx |  2 +-
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/form_controls/button_neutral.module.scss b/webapp/src/components/form_controls/button_neutral.module.scss
index 9b4446e..549681a 100644
--- a/webapp/src/components/form_controls/button_neutral.module.scss
+++ b/webapp/src/components/form_controls/button_neutral.module.scss
@@ -1,26 +1,46 @@
 /*
  * PORT-TO-CORE: the shared Button is accent-only (every emphasis colors with
- * --button-bg). These :global rules restore a neutral (grey) treatment for
- * ghost buttons that should read as toolbar controls, not accent actions —
- * matching core's header icon buttons (center-channel-color + icon opacity):
+ * --button-bg). These :global rules restore core's neutral header-icon-button
+ * behaviour for ghost buttons that should read as toolbar controls:
  *   - `.btn-icon` quaternary icon buttons (core's .btn-icon grey is otherwise
  *     overridden by the later emphasis color, so raise its specificity)
  *   - quaternary buttons marked `docs-btn-neutral` that carry a label
- * Fold the icon rule into core's .btn-icon; the label rule is a docs stopgap
+ * States mirror core's .btn-icon / channel-header icon: grey base, light-grey
+ * hover, light-blue press (:active), persistent blue when toggled on (.active).
+ * Fold the icon rules into core's .btn-icon; the label rules are a stopgap
  * until a neutral emphasis exists upstream.
  */
+
+// Base — neutral grey.
 :global(.btn.btn-icon.btn-quaternary),
 :global(.btn.btn-quaternary.docs-btn-neutral) {
     color: rgba(var(--center-channel-color-rgb), 0.64);
 }
 
+// Hover — light-grey wash (replaces btn-quaternary's accent-blue hover).
 :global(.btn.btn-icon.btn-quaternary:hover),
 :global(.btn.btn-icon.btn-quaternary.btn-force-hover),
 :global(.btn.btn-quaternary.docs-btn-neutral:hover),
 :global(.btn.btn-quaternary.docs-btn-neutral.btn-force-hover) {
-
-    // btn-quaternary hovers with an accent-blue wash; neutral toolbar buttons
-    // use the grey channel-header hover instead.
     background: rgba(var(--center-channel-color-rgb), 0.08);
     color: var(--center-channel-color);
 }
+
+// Pressed — light-blue wash + accent color. Declared after :hover so a hovered
+// press reads blue, not grey.
+:global(.btn.btn-icon.btn-quaternary:active),
+:global(.btn.btn-icon.btn-quaternary.btn-force-active),
+:global(.btn.btn-quaternary.docs-btn-neutral:active),
+:global(.btn.btn-quaternary.docs-btn-neutral.btn-force-active) {
+    background: rgba(var(--button-bg-rgb), 0.08);
+    color: rgb(var(--button-bg-rgb));
+}
+
+// Toggled on (favorited / panel open) — persistent blue, overriding hover.
+:global(.btn.btn-icon.btn-quaternary.active),
+:global(.btn.btn-icon.btn-quaternary.active:hover),
+:global(.btn.btn-quaternary.docs-btn-neutral.active),
+:global(.btn.btn-quaternary.docs-btn-neutral.active:hover) {
+    background: rgba(var(--button-bg-rgb), 0.08);
+    color: rgb(var(--button-bg-rgb));
+}
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_title_bar.tsx
index 8103178..d26ce00 100644
--- a/webapp/src/components/space_view/space_title_bar.tsx
+++ b/webapp/src/components/space_view/space_title_bar.tsx
@@ -217,7 +217,7 @@ const SpaceTitleBar = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettin
                     type='button'
                     emphasis='quaternary'
                     size='sm'
-                    className='btn-icon'
+                    className={classNames('btn-icon', {active: infoOpen})}
                     aria-label={infoLabel}
                     aria-pressed={infoOpen}
                     onClick={onToggleInfo}

From d6b9b35f6e2f513a8366664386c54d73d92d0900 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 28 Jul 2026 09:26:52 -0500
Subject: [PATCH 18/68] fix:(docs) space header icon sizes

---
 webapp/src/components/space_view/page_bar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/space_view/page_bar.tsx b/webapp/src/components/space_view/page_bar.tsx
index d853c2c..b01c51f 100644
--- a/webapp/src/components/space_view/page_bar.tsx
+++ b/webapp/src/components/space_view/page_bar.tsx
@@ -104,7 +104,7 @@ const PageBar = ({space, treeOpen, onTogglePages}: Props) => {
                     size='sm'
                     className={classNames('docs-btn-neutral', styles.edit)}
                 >
-                    <PencilOutlineIcon size={14}/>
+                    <PencilOutlineIcon size={18}/>
                     <FormattedMessage
                         id='docs.space.edit'
                         defaultMessage='Edit'
@@ -126,7 +126,7 @@ const PageBar = ({space, treeOpen, onTogglePages}: Props) => {
                     className='btn-icon'
                     aria-label={expandLabel}
                 >
-                    <ArrowExpandIcon size={16}/>
+                    <ArrowExpandIcon size={18}/>
                 </Button>
             </div>
         </div>

From 886b312ce877d95292b4cd7180a4b0cc1769bfaf Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 28 Jul 2026 11:07:22 -0500
Subject: [PATCH 19/68] refactor(docs): rename title/page bars to space/page
 header

Rename SpaceTitleBar -> SpaceHeader and PageBar -> PageHeader (files,
components, scss modules, imports, and stale comments).
---
 .../src/components/space_info/space_info_panel.tsx   |  2 +-
 ...{page_bar.module.scss => page_header.module.scss} |  0
 .../space_view/{page_bar.tsx => page_header.tsx}     |  6 +++---
 ...itle_bar.module.scss => space_header.module.scss} |  0
 .../{space_title_bar.tsx => space_header.tsx}        |  6 +++---
 webapp/src/components/space_view/space_view.tsx      | 12 ++++++------
 6 files changed, 13 insertions(+), 13 deletions(-)
 rename webapp/src/components/space_view/{page_bar.module.scss => page_header.module.scss} (100%)
 rename webapp/src/components/space_view/{page_bar.tsx => page_header.tsx} (97%)
 rename webapp/src/components/space_view/{space_title_bar.module.scss => space_header.module.scss} (100%)
 rename webapp/src/components/space_view/{space_title_bar.tsx => space_header.tsx} (98%)

diff --git a/webapp/src/components/space_info/space_info_panel.tsx b/webapp/src/components/space_info/space_info_panel.tsx
index dcc92b9..3ee11fc 100644
--- a/webapp/src/components/space_info/space_info_panel.tsx
+++ b/webapp/src/components/space_info/space_info_panel.tsx
@@ -17,7 +17,7 @@ import type {Space} from 'types/docs';
 
 import styles from './space_info_panel.module.scss';
 
-// Relative "Created …" buckets for the host Timestamp, mirroring the page bar's
+// Relative "Created …" buckets for the host Timestamp, mirroring the page header's
 // relative spec but reaching back far enough for an old space.
 const CREATED_TIME_SPEC: TimestampUnit[] = [
     ['minute', -59],
diff --git a/webapp/src/components/space_view/page_bar.module.scss b/webapp/src/components/space_view/page_header.module.scss
similarity index 100%
rename from webapp/src/components/space_view/page_bar.module.scss
rename to webapp/src/components/space_view/page_header.module.scss
diff --git a/webapp/src/components/space_view/page_bar.tsx b/webapp/src/components/space_view/page_header.tsx
similarity index 97%
rename from webapp/src/components/space_view/page_bar.tsx
rename to webapp/src/components/space_view/page_header.tsx
index b01c51f..8f6c7c4 100644
--- a/webapp/src/components/space_view/page_bar.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -17,7 +17,7 @@ import {Button} from 'components/form_controls/button';
 
 import type {Space} from 'types/docs';
 
-import styles from './page_bar.module.scss';
+import styles from './page_header.module.scss';
 
 // Relative "Updated …" buckets for the host Timestamp.
 const UPDATED_TIME_SPEC: TimestampUnit[] = [
@@ -36,7 +36,7 @@ type Props = {
 
 // Controls (comments, edit, overflow, expand) are visual scaffolding wired in
 // later passes; the pages toggle drives the page tree panel.
-const PageBar = ({space, treeOpen, onTogglePages}: Props) => {
+const PageHeader = ({space, treeOpen, onTogglePages}: Props) => {
     const {formatMessage} = useIntl();
 
     const pagesLabel = formatMessage({id: 'docs.space.pages.toggle', defaultMessage: 'Toggle page tree'});
@@ -133,4 +133,4 @@ const PageBar = ({space, treeOpen, onTogglePages}: Props) => {
     );
 };
 
-export default PageBar;
+export default PageHeader;
diff --git a/webapp/src/components/space_view/space_title_bar.module.scss b/webapp/src/components/space_view/space_header.module.scss
similarity index 100%
rename from webapp/src/components/space_view/space_title_bar.module.scss
rename to webapp/src/components/space_view/space_header.module.scss
diff --git a/webapp/src/components/space_view/space_title_bar.tsx b/webapp/src/components/space_view/space_header.tsx
similarity index 98%
rename from webapp/src/components/space_view/space_title_bar.tsx
rename to webapp/src/components/space_view/space_header.tsx
index d26ce00..e4e210c 100644
--- a/webapp/src/components/space_view/space_title_bar.tsx
+++ b/webapp/src/components/space_view/space_header.tsx
@@ -30,7 +30,7 @@ import ShareSpaceModal from 'components/share_space_modal/share_space_modal';
 
 import type {Space} from 'types/docs';
 
-import styles from './space_title_bar.module.scss';
+import styles from './space_header.module.scss';
 
 type Props = {
     space: Space;
@@ -40,7 +40,7 @@ type Props = {
     onOpenSettings: () => void;
 };
 
-const SpaceTitleBar = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings}: Props) => {
+const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings}: Props) => {
     const {formatMessage} = useIntl();
     const dispatch = useAppDispatch();
     const {paths, spaceId, goHome} = useDocsNavigation();
@@ -305,4 +305,4 @@ const SpaceTitleBar = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettin
     );
 };
 
-export default SpaceTitleBar;
+export default SpaceHeader;
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index 81bb470..f0abaff 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -10,14 +10,14 @@ import SpaceSettingsModal from 'components/space_settings_modal/space_settings_m
 
 import type {Space} from 'types/docs';
 
-import PageBar from './page_bar';
+import PageHeader from './page_header';
 import PageHero from './page_hero';
 import PageTreePanel from './page_tree/page_tree_panel';
-import SpaceTitleBar from './space_title_bar';
+import SpaceHeader from './space_header';
 import styles from './space_view.module.scss';
 
-// Main content for a routed space: the space title bar spans the full width; a
-// flex row holds the page tree panel, the content column (page bar over the
+// Main content for a routed space: the space header spans the full width; a
+// flex row holds the page tree panel, the content column (page header over the
 // front-door hero), and the optional space info panel as a right column. The
 // page body is a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
@@ -32,7 +32,7 @@ const SpaceView = ({space}: {space: Space}) => {
 
     return (
         <div className={styles.root}>
-            <SpaceTitleBar
+            <SpaceHeader
                 space={space}
                 memberCount={memberCount}
                 infoOpen={infoOpen}
@@ -42,7 +42,7 @@ const SpaceView = ({space}: {space: Space}) => {
             <div className={styles.body}>
                 {treeOpen && <PageTreePanel space={space}/>}
                 <div className={styles.main}>
-                    <PageBar
+                    <PageHeader
                         space={space}
                         treeOpen={treeOpen}
                         onTogglePages={togglePages}

From 4c9964866f9dab87ec18ae6b11dd2f465df3bf79 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 28 Jul 2026 12:22:50 -0500
Subject: [PATCH 20/68] feat(docs): reorder space view; sliding pages sidebar

Stack space header (56px) and page header (52px, no bottom border) full
width, then a body row of the pages sidebar over the page content column.
The sidebar is always mounted and animates its width open/closed so the
tree slides in/out without reflowing.
---
 .../space_view/page_header.module.scss        |  3 +--
 .../space_view/space_header.module.scss       |  2 +-
 .../space_view/space_view.module.scss         | 12 ++++++++++
 .../src/components/space_view/space_view.tsx  | 24 +++++++++++--------
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/space_view/page_header.module.scss b/webapp/src/components/space_view/page_header.module.scss
index 135647c..a1510dd 100644
--- a/webapp/src/components/space_view/page_header.module.scss
+++ b/webapp/src/components/space_view/page_header.module.scss
@@ -2,9 +2,8 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    height: 40px;
+    height: 52px;
     padding: 0 12px 0 8px;
-    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
     background: var(--center-channel-bg);
 }
 
diff --git a/webapp/src/components/space_view/space_header.module.scss b/webapp/src/components/space_view/space_header.module.scss
index fd0ecd7..9790199 100644
--- a/webapp/src/components/space_view/space_header.module.scss
+++ b/webapp/src/components/space_view/space_header.module.scss
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    height: 48px;
+    height: 56px;
     padding: 0 12px 0 8px;
     border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
     background: var(--center-channel-bg);
diff --git a/webapp/src/components/space_view/space_view.module.scss b/webapp/src/components/space_view/space_view.module.scss
index 1c57053..4270c4f 100644
--- a/webapp/src/components/space_view/space_view.module.scss
+++ b/webapp/src/components/space_view/space_view.module.scss
@@ -13,6 +13,18 @@
     min-height: 0;
 }
 
+// Fixed-width tree panel clipped by a wrapper whose width animates open/closed.
+.sidebar {
+    flex-shrink: 0;
+    width: 0;
+    overflow: hidden;
+    transition: width 200ms ease;
+}
+
+.sidebarOpen {
+    width: 264px;
+}
+
 .main {
     display: flex;
     flex: 1 1 0;
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index f0abaff..ad976c5 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import {useSpaceStats} from 'hooks/spaces';
 import React, {useCallback, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
@@ -16,10 +17,11 @@ import PageTreePanel from './page_tree/page_tree_panel';
 import SpaceHeader from './space_header';
 import styles from './space_view.module.scss';
 
-// Main content for a routed space: the space header spans the full width; a
-// flex row holds the page tree panel, the content column (page header over the
-// front-door hero), and the optional space info panel as a right column. The
-// page body is a placeholder until the editor is mounted.
+// Main content for a routed space: the space header and page header stack
+// full-width at the top; below them a flex row holds the pages sidebar (which
+// slides in/out), the page content column (front-door hero over the editor
+// area), and the optional space info panel as a right column. The page body is
+// a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
     const {pageCount, memberCount} = useSpaceStats(space.id);
     const [treeOpen, setTreeOpen] = useState(true);
@@ -39,14 +41,16 @@ const SpaceView = ({space}: {space: Space}) => {
                 onToggleInfo={toggleInfo}
                 onOpenSettings={openSettings}
             />
+            <PageHeader
+                space={space}
+                treeOpen={treeOpen}
+                onTogglePages={togglePages}
+            />
             <div className={styles.body}>
-                {treeOpen && <PageTreePanel space={space}/>}
+                <div className={classNames(styles.sidebar, {[styles.sidebarOpen]: treeOpen})}>
+                    <PageTreePanel space={space}/>
+                </div>
                 <div className={styles.main}>
-                    <PageHeader
-                        space={space}
-                        treeOpen={treeOpen}
-                        onTogglePages={togglePages}
-                    />
                     <div className={styles.scroll}>
                         <div className={styles.content}>
                             <PageHero

From 022c7fabd032db8b82d2f3bf42858bea2560885d Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 28 Jul 2026 12:40:58 -0500
Subject: [PATCH 21/68] chore(webapp): bump preset-env browser floors

Raise preset-env targets to Chrome 110 / Firefox 102 / Edge 110 /
Safari 16.4 to match the host channels webapp's documented minimum
supported browsers.
---
 webapp/babel.config.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/babel.config.js b/webapp/babel.config.js
index e4aa2d1..2283743 100644
--- a/webapp/babel.config.js
+++ b/webapp/babel.config.js
@@ -5,10 +5,10 @@ const config = {
     presets: [
         ['@babel/preset-env', {
             targets: {
-                chrome: 66,
-                firefox: 60,
-                edge: 42,
-                safari: 12,
+                chrome: 110,
+                firefox: 102,
+                edge: 110,
+                safari: '16.4',
             },
             modules: false,
             corejs: 3,

From 042de1ac1c3a1e7b8685cb3ce4f974cb0495b9af Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 28 Jul 2026 12:41:12 -0500
Subject: [PATCH 22/68] perf(webapp): code-split docs root; emit assets as
 files

Lazy-load the Docs backstage UI into its own async chunk (docs_root_lazy
+ React.lazy/Suspense) so the initial plugin bundle stays small. Switch
webpack output to publicPath: 'auto' with chunkFilename, and emit binary
assets via asset/resource instead of inlining, so chunks and assets
resolve from the served plugin path (works under subpath hosting). Add a
build:analyze target gated on webpack-bundle-analyzer.
---
 webapp/package-lock.json                      | 133 ++++++++++++++++++
 webapp/package.json                           |   2 +
 .../components/docs_root/docs_root_lazy.tsx   |  19 +++
 webapp/src/index.tsx                          |   4 +-
 webapp/webpack.config.js                      |  40 ++++--
 5 files changed, 186 insertions(+), 12 deletions(-)
 create mode 100644 webapp/src/components/docs_root/docs_root_lazy.tsx

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index ff57f99..f9412fa 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -74,6 +74,7 @@
         "sass-loader": "13.0.0",
         "style-loader": "3.3.1",
         "webpack": "5.95.0",
+        "webpack-bundle-analyzer": "4.10.2",
         "webpack-cli": "5.1.4"
       }
     },
@@ -3629,6 +3630,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@redux-devtools/extension": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.3.0.tgz",
@@ -6340,6 +6348,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -6568,6 +6583,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.331",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.331.tgz",
@@ -8334,6 +8356,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/harmony-reflect": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -11015,6 +11053,16 @@
         "color-name": "^1.1.4"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -11346,6 +11394,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -12794,6 +12852,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -13364,6 +13437,16 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -13896,6 +13979,56 @@
         }
       }
     },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
+      "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/acorn-walk": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
+      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/webpack-cli": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index fe2350f..c6b39a2 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -3,6 +3,7 @@
   "scripts": {
     "build": "webpack --mode=production",
     "build:watch": "webpack --mode=production --watch",
+    "build:analyze": "webpack --mode=production",
     "debug": "webpack --mode=development",
     "debug:watch": "webpack --mode=development --watch",
     "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext=.js,.jsx,tsx,ts . --quiet --cache",
@@ -60,6 +61,7 @@
     "sass-loader": "13.0.0",
     "style-loader": "3.3.1",
     "webpack": "5.95.0",
+    "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4"
   },
   "dependencies": {
diff --git a/webapp/src/components/docs_root/docs_root_lazy.tsx b/webapp/src/components/docs_root/docs_root_lazy.tsx
new file mode 100644
index 0000000..5439bb5
--- /dev/null
+++ b/webapp/src/components/docs_root/docs_root_lazy.tsx
@@ -0,0 +1,19 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {Suspense} from 'react';
+
+// The Docs product UI ("backstage") and its whole import tree are code-split
+// into their own async chunk, so the plugin's initial bundle stays small and
+// the UI loads only when the product mounts. webpack fetches the chunk at
+// runtime; output.publicPath: 'auto' resolves it relative to the served plugin
+// bundle (no hardcoded plugin static path).
+const DocsRoot = React.lazy(() => import(/* webpackChunkName: "docs-backstage" */ './docs_root'));
+
+const DocsRootLazy = () => (
+    <Suspense fallback={null}>
+        <DocsRoot/>
+    </Suspense>
+);
+
+export default DocsRootLazy;
diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx
index 821ad44..e6e5884 100644
--- a/webapp/src/index.tsx
+++ b/webapp/src/index.tsx
@@ -7,7 +7,7 @@ import {DOCS_BASE_URL, DOCS_SWITCHER_LINK_URL} from 'routing/paths';
 
 import reducer from 'store/reducer';
 
-import DocsRoot from 'components/docs_root/docs_root';
+import DocsRootLazy from 'components/docs_root/docs_root_lazy';
 import DocsSettingsButton from 'components/docs_settings_button/docs_settings_button';
 
 import type {PluginRegistry} from 'types/mattermost-webapp';
@@ -44,7 +44,7 @@ export default class Plugin {
             switcherIcon: SWITCHER_ICON,
             switcherText: 'Docs',
             switcherLinkURL: DOCS_SWITCHER_LINK_URL,
-            mainComponent: DocsRoot,
+            mainComponent: DocsRootLazy,
             headerCentreComponent: DocsHeaderCentre,
             headerRightComponent: DocsSettingsButton,
             showTeamSidebar: true,
diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js
index 26cd7ce..2f091c3 100644
--- a/webapp/webpack.config.js
+++ b/webapp/webpack.config.js
@@ -8,6 +8,7 @@ const PLUGIN_ID = require('../plugin.json').id;
 
 const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
 const isDev = NPM_TARGET === 'debug' || NPM_TARGET === 'debug:watch';
+const isAnalyze = NPM_TARGET === 'build:analyze';
 
 const plugins = [
     // Shim Node's `process` for transitive deps whose Node-detection paths read
@@ -39,6 +40,17 @@ if (NPM_TARGET === 'build:watch' || NPM_TARGET === 'debug:watch') {
     });
 }
 
+if (isAnalyze) {
+    // Only loaded for `npm run build:analyze`, so it stays out of normal builds.
+    // eslint-disable-next-line global-require
+    const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
+    plugins.push(new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        reportFilename: 'bundle-report.html',
+        openAnalyzer: true,
+    }));
+}
+
 const config = {
     entry: [
         './src/index.tsx',
@@ -93,16 +105,16 @@ const config = {
                 ],
             },
             {
-                // Inline binary assets into the single plugin bundle, matching
-                // Playbooks/Calls. Emitting separate resource files instead
-                // (`asset`/`asset/resource`, plus code-split chunks) requires an
-                // output.publicPath under the plugin's static route and a backend
-                // handler to serve it (as Boards does) — which also becomes
-                // necessary to support subpath-hosted Mattermost instances.
-                // Adopt that when real, large binary assets or chunking land; no
-                // such assets are imported today.
+                // Emit binary assets as separate files (not inlined) so large
+                // assets don't bloat the bundle. With output.publicPath: 'auto'
+                // the runtime resolves them relative to the served plugin bundle,
+                // so the host serves them from the plugin's static path without a
+                // hardcoded URL — the same mechanism the async chunks rely on.
                 test: /\.(png|eot|tiff|svg|woff2|woff|ttf|gif|mp3|jpg|jpeg)$/,
-                type: 'asset/inline',
+                type: 'asset/resource',
+                generator: {
+                    filename: 'assets/[name].[contenthash][ext]',
+                },
             },
         ],
     },
@@ -119,9 +131,17 @@ const config = {
     output: {
         devtoolNamespace: PLUGIN_ID,
         path: path.join(__dirname, '/dist'),
-        publicPath: '/',
+
+        // 'auto' makes webpack resolve async-chunk and asset/resource URLs at
+        // runtime from where the plugin bundle is served (its static path),
+        // rather than the site root '/'. This lets code-split chunks and emitted
+        // assets load without a hardcoded plugin URL and keeps subpath-hosted
+        // Mattermost instances working.
+        publicPath: 'auto',
         filename: 'main.js',
+        chunkFilename: '[name].[contenthash].js',
     },
+
     mode: (isDev) ? 'eval-source-map' : 'production',
     plugins,
 };

From 7bc8af049c834def12e6fadeda6e4afb3fc49b1f Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 28 Jul 2026 12:46:31 -0500
Subject: [PATCH 23/68] refactor(docs): share a 56px product header

Extract a reusable Header (56px bar, bottom border, left/right slots) and
adopt it in Docs Home and the space header, unifying the top-bar chrome.
Docs Home's header is now 56px tall to match.
---
 .../docs_home/docs_home.module.scss           |  10 --
 webapp/src/components/docs_home/docs_home.tsx |  29 ++--
 .../src/components/header/header.module.scss  |  25 +++
 webapp/src/components/header/header.tsx       |  25 +++
 .../space_view/space_header.module.scss       |  26 ---
 .../components/space_view/space_header.tsx    | 162 ++++++++++--------
 6 files changed, 153 insertions(+), 124 deletions(-)
 create mode 100644 webapp/src/components/header/header.module.scss
 create mode 100644 webapp/src/components/header/header.tsx

diff --git a/webapp/src/components/docs_home/docs_home.module.scss b/webapp/src/components/docs_home/docs_home.module.scss
index e859b54..0bacc5d 100644
--- a/webapp/src/components/docs_home/docs_home.module.scss
+++ b/webapp/src/components/docs_home/docs_home.module.scss
@@ -7,17 +7,7 @@
     background: var(--center-channel-bg);
 }
 
-.header {
-    display: flex;
-    flex: 0 0 auto;
-    gap: 16px;
-    align-items: center;
-    padding: 12px 20px;
-    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
-}
-
 .headerTitle {
-    flex: 1 1 auto;
     margin: 0;
     color: var(--center-channel-color);
     font-family: 'Metropolis', sans-serif;
diff --git a/webapp/src/components/docs_home/docs_home.tsx b/webapp/src/components/docs_home/docs_home.tsx
index cc15d6e..c883f17 100644
--- a/webapp/src/components/docs_home/docs_home.tsx
+++ b/webapp/src/components/docs_home/docs_home.tsx
@@ -16,6 +16,7 @@ import PlusIcon from '@mattermost/compass-icons/components/plus';
 import SearchListIcon from '@mattermost/compass-icons/components/search-list';
 
 import {PrimaryButton, TertiaryButton} from 'components/form_controls/button';
+import Header from 'components/header/header';
 
 import type {SpaceSummary} from 'types/docs';
 
@@ -37,18 +38,22 @@ const DocsHome = ({onCreateSpace, onBrowseSpaces}: Props) => {
     const summaries = useRecentSpaceSummaries();
 
     const header = (
-        <header className={styles.header}>
-            <h1 className={styles.headerTitle}>
-                {formatMessage({id: 'docs.home.title', defaultMessage: 'Home'})}
-            </h1>
-            <PrimaryButton
-                className={styles.cta}
-                onClick={onCreateSpace}
-            >
-                <PlusIcon size={16}/>
-                {formatMessage({id: 'docs.home.newSpace', defaultMessage: 'New Space'})}
-            </PrimaryButton>
-        </header>
+        <Header
+            left={
+                <h1 className={styles.headerTitle}>
+                    {formatMessage({id: 'docs.home.title', defaultMessage: 'Home'})}
+                </h1>
+            }
+            right={
+                <PrimaryButton
+                    className={styles.cta}
+                    onClick={onCreateSpace}
+                >
+                    <PlusIcon size={16}/>
+                    {formatMessage({id: 'docs.home.newSpace', defaultMessage: 'New Space'})}
+                </PrimaryButton>
+            }
+        />
     );
 
     if (summaries.length === 0) {
diff --git a/webapp/src/components/header/header.module.scss b/webapp/src/components/header/header.module.scss
new file mode 100644
index 0000000..b2b7fb1
--- /dev/null
+++ b/webapp/src/components/header/header.module.scss
@@ -0,0 +1,25 @@
+.header {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 8px;
+    height: 56px;
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: var(--center-channel-bg);
+}
+
+.left {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: center;
+    gap: 8px;
+}
+
+.right {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+}
diff --git a/webapp/src/components/header/header.tsx b/webapp/src/components/header/header.tsx
new file mode 100644
index 0000000..ea9290d
--- /dev/null
+++ b/webapp/src/components/header/header.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from './header.module.scss';
+
+type Props = {
+    left: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+};
+
+// Shared 56px product header bar: a full-width row with a flexible left region
+// and a shrink-to-fit right region for actions. Docs Home and the Space view
+// share the chrome (height, border, padding); each supplies its own content.
+const Header = ({left, right, className}: Props) => (
+    <header className={classNames(styles.header, className)}>
+        <div className={styles.left}>{left}</div>
+        {right != null && <div className={styles.right}>{right}</div>}
+    </header>
+);
+
+export default Header;
diff --git a/webapp/src/components/space_view/space_header.module.scss b/webapp/src/components/space_view/space_header.module.scss
index 9790199..cb2b60f 100644
--- a/webapp/src/components/space_view/space_header.module.scss
+++ b/webapp/src/components/space_view/space_header.module.scss
@@ -1,28 +1,3 @@
-.bar {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    height: 56px;
-    padding: 0 12px 0 8px;
-    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
-    background: var(--center-channel-bg);
-}
-
-.left {
-    display: flex;
-    flex: 1 1 auto;
-    min-width: 0;
-    align-items: center;
-    gap: 4px;
-}
-
-.right {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    gap: 8px;
-}
-
 .titleTrigger {
     display: inline-flex;
     min-width: 0;
@@ -59,7 +34,6 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    margin-left: 4px;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     font-size: 12px;
     font-weight: 600;
diff --git a/webapp/src/components/space_view/space_header.tsx b/webapp/src/components/space_view/space_header.tsx
index e4e210c..e93c324 100644
--- a/webapp/src/components/space_view/space_header.tsx
+++ b/webapp/src/components/space_view/space_header.tsx
@@ -24,6 +24,7 @@ import {useSpacePermissions} from 'store/permissions';
 
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
 import {Button, PrimaryButton} from 'components/form_controls/button';
+import Header from 'components/header/header';
 import Menu from 'components/menu/menu';
 import type {MenuItemSpec} from 'components/menu/menu_types';
 import ShareSpaceModal from 'components/share_space_modal/share_space_modal';
@@ -158,85 +159,94 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings
         }] : []),
     ];
 
-    return (
-        <div className={styles.bar}>
-            <div className={styles.left}>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='xs'
-                    className='btn-icon'
-                    aria-label={favoriteLabel}
-                >
-                    <StarOutlineIcon size={18}/>
-                </Button>
-                <Menu
-                    ariaLabel={menuLabel}
-                    tooltip={menuLabel}
-                    items={items}
-                    trigger={(
-                        <Button
-                            type='button'
-                            emphasis='quaternary'
-                            size='sm'
-                            className={styles.titleTrigger}
-                            aria-label={menuLabel}
+    const left = (
+        <>
+            <Button
+                type='button'
+                emphasis='quaternary'
+                size='xs'
+                className='btn-icon'
+                aria-label={favoriteLabel}
+            >
+                <StarOutlineIcon size={18}/>
+            </Button>
+            <Menu
+                ariaLabel={menuLabel}
+                tooltip={menuLabel}
+                items={items}
+                trigger={(
+                    <Button
+                        type='button'
+                        emphasis='quaternary'
+                        size='sm'
+                        className={styles.titleTrigger}
+                        aria-label={menuLabel}
+                    >
+                        <span
+                            className={styles.emoji}
+                            aria-hidden={true}
                         >
-                            <span
-                                className={styles.emoji}
-                                aria-hidden={true}
-                            >
-                                <SpaceIcon
-                                    space={space}
-                                    size={18}
-                                />
-                            </span>
-                            <span className={styles.title}>{space.title}</span>
-                            <ChevronDownIcon
-                                className={styles.chevron}
-                                size={16}
+                            <SpaceIcon
+                                space={space}
+                                size={18}
                             />
-                        </Button>
-                    )}
+                        </span>
+                        <span className={styles.title}>{space.title}</span>
+                        <ChevronDownIcon
+                            className={styles.chevron}
+                            size={16}
+                        />
+                    </Button>
+                )}
+            />
+            <Button
+                type='button'
+                emphasis='quaternary'
+                size='xs'
+                className={classNames('docs-btn-neutral', styles.members)}
+                aria-label={membersLabel}
+                onClick={() => setShareOpen(true)}
+            >
+                <AccountMultipleOutlineIcon size={16}/>
+                <span>{memberCount}</span>
+            </Button>
+        </>
+    );
+
+    const right = (
+        <>
+            <Button
+                type='button'
+                emphasis='quaternary'
+                size='sm'
+                className={classNames('btn-icon', {active: infoOpen})}
+                aria-label={infoLabel}
+                aria-pressed={infoOpen}
+                onClick={onToggleInfo}
+            >
+                <InformationOutlineIcon size={18}/>
+            </Button>
+            <PrimaryButton
+                type='button'
+                size='sm'
+                className={styles.share}
+                onClick={() => setShareOpen(true)}
+            >
+                <ShareVariantOutlineIcon size={16}/>
+                <FormattedMessage
+                    id='docs.space.share'
+                    defaultMessage='Share'
                 />
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='xs'
-                    className={classNames('docs-btn-neutral', styles.members)}
-                    aria-label={membersLabel}
-                    onClick={() => setShareOpen(true)}
-                >
-                    <AccountMultipleOutlineIcon size={16}/>
-                    <span>{memberCount}</span>
-                </Button>
-            </div>
+            </PrimaryButton>
+        </>
+    );
 
-            <div className={styles.right}>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className={classNames('btn-icon', {active: infoOpen})}
-                    aria-label={infoLabel}
-                    aria-pressed={infoOpen}
-                    onClick={onToggleInfo}
-                >
-                    <InformationOutlineIcon size={18}/>
-                </Button>
-                <PrimaryButton
-                    type='button'
-                    size='sm'
-                    className={styles.share}
-                    onClick={() => setShareOpen(true)}
-                >
-                    <ShareVariantOutlineIcon size={16}/>
-                    <FormattedMessage
-                        id='docs.space.share'
-                        defaultMessage='Share'
-                    />
-                </PrimaryButton>
-            </div>
+    return (
+        <>
+            <Header
+                left={left}
+                right={right}
+            />
             {shareOpen && (
                 <ShareSpaceModal
                     space={space}
@@ -301,7 +311,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings
                     />
                 </ConfirmModal>
             )}
-        </div>
+        </>
     );
 };
 

From 3ac436bfec4aeec48db82fa7807621ff434ccc1c Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Fri, 31 Jul 2026 16:04:56 -0500
Subject: [PATCH 24/68] feat(docs): build out space view, favorites, modal
 infra

Large batch of Spaces UI work against the Figma specs, plus the shared
infrastructure it needed.

Shared UI:
- Menu refactored to children-based compound components (Item, LinkItem,
  Separator, Submenu) and all callsites migrated
- Toast and modal controllers on base-ui, with imperative + hook APIs
- Tabs (vertical/horizontal), Select, Spacer, SaveChangesBar,
  BasicInputModal, ResizableDivider; GenericModal gains titleActions and
  optional header/footer dividers
- Button drops the required `type`, gains badging and icon/label modes
- WithTooltip is now the only tooltip; local tooltip component removed

Space view:
- Space header 56px, page header 52px, page tree, page content and hero
- Real resizable pages sidebar and full-height Space Info panel, with
  editable description, menu and members sub-panel
- Page menu (tree + header), rename and delete modals, page drag preview
- Overview row for space home; truthful canDrop with blocked drop cues

Favorites:
- Spaces and pages favorited via the user preferences API, with memoized
  selectors, tri-state space toggle and per-team sidebar ordering
- Ordering payload capped under the preference value limit

Data layer:
- Plugin reducers wrapped in an `entities` subtree
- Default-page routing via canonical Switch/Route/Redirect, with an
  explicit /overview sub-route that outranks the default page

Context: iterative UI wiring session on docs-wire-spaces-api, driven by
Figma reviews and screenshots; verified with tsc, eslint, jest and build.
---
 webapp/i18n/en.json                           |  72 +-
 .../basic_input_modal.module.scss             |  20 +
 .../basic_input_modal.test.tsx                |  65 ++
 .../basic_input_modal/basic_input_modal.tsx   | 133 ++++
 .../delete_page_modal/delete_page_modal.tsx   |  78 +++
 webapp/src/components/docs_home/docs_home.tsx |   4 +-
 .../docs_root/docs_main_content.tsx           |  56 +-
 webapp/src/components/docs_root/docs_root.tsx |  15 +-
 .../docs_switcher/docs_switcher.tsx           |  83 ++-
 .../src/components/form_controls/button.tsx   |  90 ++-
 .../form_controls/button_neutral.module.scss  |  36 +
 .../form_controls/select.module.scss          | 112 ++++
 .../src/components/form_controls/select.tsx   | 104 +++
 .../components/form_controls/text_area.tsx    |   4 +-
 .../generic_modal/generic_modal.module.scss   |  21 +-
 .../generic_modal/generic_modal.tsx           |  19 +-
 webapp/src/components/menu/menu.module.scss   |  22 +
 webapp/src/components/menu/menu.test.tsx      |  22 +-
 webapp/src/components/menu/menu.tsx           | 167 ++++-
 webapp/src/components/menu/menu_types.ts      |  21 -
 .../modals/docs_modal_controller.test.tsx     |  85 +++
 .../modals/docs_modal_controller.tsx          |  43 ++
 webapp/src/components/modals/index.ts         |   8 +
 webapp/src/components/modals/modal_store.ts   |  70 ++
 .../src/components/modals/use_docs_modals.ts  |  15 +
 webapp/src/components/page_menu/page_menu.tsx | 231 +++++++
 .../resizable_divider.module.scss             |  62 ++
 .../resizable_divider/resizable_divider.tsx   | 148 +++++
 .../save_changes_bar.module.scss              |  46 ++
 .../save_changes_bar/save_changes_bar.tsx     |  94 +++
 .../people_picker.module.scss                 | 101 ++-
 .../share_space_modal/people_picker.test.tsx  |  80 +++
 .../share_space_modal/people_picker.tsx       |  99 ++-
 .../share_space_modal.module.scss             |  11 +-
 .../share_space_modal/share_space_modal.tsx   |  52 +-
 .../space_info/space_info_members.tsx         |  49 ++
 .../space_info/space_info_menu.module.scss    |  57 ++
 .../components/space_info/space_info_menu.tsx | 120 ++++
 .../space_info/space_info_panel.module.scss   |  72 +-
 .../space_info/space_info_panel.tsx           | 297 ++++++---
 .../space_settings_modal.module.scss          | 215 +++---
 .../space_settings_modal.test.tsx             |  62 +-
 .../space_settings_modal.tsx                  | 614 ++++++++++--------
 .../space_view/member_avatars.module.scss     |  19 +
 .../components/space_view/member_avatars.tsx  |  75 ++-
 .../page_content/page_content.module.scss     |  95 +++
 .../space_view/page_content/page_content.tsx  |  97 +++
 .../page_content_placeholder.module.scss      |  37 ++
 .../page_content/page_content_placeholder.tsx |  36 +
 .../space_view/page_header.module.scss        |  37 +-
 .../src/components/space_view/page_header.tsx | 167 +++--
 .../space_view/page_hero.module.scss          |   4 -
 .../src/components/space_view/page_hero.tsx   |   7 +-
 .../components/space_view/page_tree/depth.ts  |  27 +
 .../page_tree/dnd/use_page_drag_drop.ts       |  80 ++-
 .../space_view/page_tree/dnd/use_pages_dnd.ts |  14 +-
 .../page_tree/page_drag_preview.module.scss   |  43 ++
 .../page_tree/page_drag_preview.tsx           |  44 ++
 .../page_tree/page_tree_node.module.scss      | 111 +++-
 .../space_view/page_tree/page_tree_node.tsx   | 198 +++++-
 .../page_tree/page_tree_panel.module.scss     |  44 +-
 .../space_view/page_tree/page_tree_panel.tsx  |  64 +-
 .../page_tree/space_home_item.module.scss     |  60 ++
 .../space_view/page_tree/space_home_item.tsx  |  51 ++
 .../space_view/sidebar/sidebar.module.scss    |  25 +
 .../components/space_view/sidebar/sidebar.tsx |  69 ++
 .../space_view/space_header.module.scss       |  36 +-
 .../components/space_view/space_header.tsx    | 408 ++++++------
 .../space_view/space_view.module.scss         |  31 +-
 .../src/components/space_view/space_view.tsx  | 118 ++--
 .../src/components/spacer/spacer.module.scss  |   6 +
 webapp/src/components/spacer/spacer.tsx       |  21 +
 .../spaces_sidebar/space_item_menu.test.tsx   |   7 +
 .../spaces_sidebar/space_item_menu.tsx        | 105 ++-
 .../spaces_sidebar/spaces_sidebar.tsx         |  35 +-
 .../spaces_sidebar/spaces_sidebar_header.tsx  |  88 ++-
 .../spaces_sidebar/use_sidebar_spaces.ts      | 147 +++--
 webapp/src/components/tabs/tabs.module.scss   |  92 +++
 webapp/src/components/tabs/tabs.tsx           |  98 +++
 .../components/toast/docs_toaster.module.scss | 105 +++
 .../components/toast/docs_toaster.test.tsx    |  67 ++
 webapp/src/components/toast/docs_toaster.tsx  |  79 +++
 webapp/src/components/toast/index.ts          |   6 +
 webapp/src/components/toast/toast.ts          |  76 +++
 webapp/src/data/api_data_source.ts            |  22 +-
 webapp/src/data/collapsed_pages.ts            |  15 +
 webapp/src/data/docs_data_source.ts           |  10 +-
 webapp/src/data/favorites.test.ts             |  73 +++
 webapp/src/data/favorites.ts                  | 107 +++
 webapp/src/data/sidebar_widths.ts             |  33 +
 webapp/src/hooks/favorites.ts                 | 109 ++++
 webapp/src/hooks/members.ts                   |  27 +
 webapp/src/hooks/navigation.ts                |  15 +-
 webapp/src/hooks/page_tree.ts                 |   9 +-
 webapp/src/hooks/pages.ts                     |  59 ++
 webapp/src/hooks/sidebar_width.ts             |  77 +++
 webapp/src/hooks/team.ts                      |   7 +
 webapp/src/hooks/text_overflow.ts             |  44 ++
 webapp/src/routing/paths.ts                   |  15 +
 webapp/src/store/action_types.ts              |   1 +
 webapp/src/store/actions.ts                   |  47 +-
 webapp/src/store/entities.test.ts             | 182 ++++++
 webapp/src/store/entities.ts                  | 279 ++++++++
 webapp/src/store/favorites.ts                 | 109 ++++
 webapp/src/store/reducer.test.ts              | 145 +----
 webapp/src/store/reducer.ts                   | 216 +-----
 webapp/src/store/selectors.test.ts            |  24 +-
 webapp/src/store/selectors.ts                 |  32 +-
 webapp/src/store/test_fixtures.ts             |   2 +
 webapp/src/store/types.ts                     |   3 +
 webapp/src/types/docs.ts                      |  20 +
 webapp/src/utils/space_icon.tsx               |  23 +-
 webapp/src/webapp_globals.ts                  |   7 +-
 webapp/tests/react_testing_utils.tsx          |   8 +-
 114 files changed, 6639 insertions(+), 1785 deletions(-)
 create mode 100644 webapp/src/components/basic_input_modal/basic_input_modal.module.scss
 create mode 100644 webapp/src/components/basic_input_modal/basic_input_modal.test.tsx
 create mode 100644 webapp/src/components/basic_input_modal/basic_input_modal.tsx
 create mode 100644 webapp/src/components/delete_page_modal/delete_page_modal.tsx
 create mode 100644 webapp/src/components/form_controls/select.module.scss
 create mode 100644 webapp/src/components/form_controls/select.tsx
 delete mode 100644 webapp/src/components/menu/menu_types.ts
 create mode 100644 webapp/src/components/modals/docs_modal_controller.test.tsx
 create mode 100644 webapp/src/components/modals/docs_modal_controller.tsx
 create mode 100644 webapp/src/components/modals/index.ts
 create mode 100644 webapp/src/components/modals/modal_store.ts
 create mode 100644 webapp/src/components/modals/use_docs_modals.ts
 create mode 100644 webapp/src/components/page_menu/page_menu.tsx
 create mode 100644 webapp/src/components/resizable_divider/resizable_divider.module.scss
 create mode 100644 webapp/src/components/resizable_divider/resizable_divider.tsx
 create mode 100644 webapp/src/components/save_changes_bar/save_changes_bar.module.scss
 create mode 100644 webapp/src/components/save_changes_bar/save_changes_bar.tsx
 create mode 100644 webapp/src/components/share_space_modal/people_picker.test.tsx
 create mode 100644 webapp/src/components/space_info/space_info_members.tsx
 create mode 100644 webapp/src/components/space_info/space_info_menu.module.scss
 create mode 100644 webapp/src/components/space_info/space_info_menu.tsx
 create mode 100644 webapp/src/components/space_view/page_content/page_content.module.scss
 create mode 100644 webapp/src/components/space_view/page_content/page_content.tsx
 create mode 100644 webapp/src/components/space_view/page_content/page_content_placeholder.module.scss
 create mode 100644 webapp/src/components/space_view/page_content/page_content_placeholder.tsx
 create mode 100644 webapp/src/components/space_view/page_tree/depth.ts
 create mode 100644 webapp/src/components/space_view/page_tree/page_drag_preview.module.scss
 create mode 100644 webapp/src/components/space_view/page_tree/page_drag_preview.tsx
 create mode 100644 webapp/src/components/space_view/page_tree/space_home_item.module.scss
 create mode 100644 webapp/src/components/space_view/page_tree/space_home_item.tsx
 create mode 100644 webapp/src/components/space_view/sidebar/sidebar.module.scss
 create mode 100644 webapp/src/components/space_view/sidebar/sidebar.tsx
 create mode 100644 webapp/src/components/spacer/spacer.module.scss
 create mode 100644 webapp/src/components/spacer/spacer.tsx
 create mode 100644 webapp/src/components/tabs/tabs.module.scss
 create mode 100644 webapp/src/components/tabs/tabs.tsx
 create mode 100644 webapp/src/components/toast/docs_toaster.module.scss
 create mode 100644 webapp/src/components/toast/docs_toaster.test.tsx
 create mode 100644 webapp/src/components/toast/docs_toaster.tsx
 create mode 100644 webapp/src/components/toast/index.ts
 create mode 100644 webapp/src/components/toast/toast.ts
 create mode 100644 webapp/src/data/favorites.test.ts
 create mode 100644 webapp/src/data/favorites.ts
 create mode 100644 webapp/src/data/sidebar_widths.ts
 create mode 100644 webapp/src/hooks/favorites.ts
 create mode 100644 webapp/src/hooks/pages.ts
 create mode 100644 webapp/src/hooks/sidebar_width.ts
 create mode 100644 webapp/src/hooks/text_overflow.ts
 create mode 100644 webapp/src/store/entities.test.ts
 create mode 100644 webapp/src/store/entities.ts
 create mode 100644 webapp/src/store/favorites.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 7edb2b2..38a1b03 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -2,6 +2,8 @@
   "docs.archiveSpace.confirm": "Yes, archive space",
   "docs.archiveSpace.message": "Are you sure you want to archive the <b>{name}</b> space? Members will lose access until it is restored.",
   "docs.archiveSpace.title": "Archive {name}",
+  "docs.basicInputModal.cancel": "Cancel",
+  "docs.basicInputModal.confirm": "Save",
   "docs.confirmModal.cancel": "Cancel",
   "docs.confirmModal.confirm": "Confirm",
   "docs.createSpace.cancel": "Cancel",
@@ -20,6 +22,10 @@
   "docs.createSpace.public.title": "Public Space",
   "docs.createSpace.title": "Create a new space",
   "docs.createSpace.visibilityLabel": "Space visibility",
+  "docs.deletePage.confirm": "Delete",
+  "docs.deletePage.error": "Could not delete “{title}”.",
+  "docs.deletePage.message": "Are you sure you want to delete <b>{title}</b>? Its subpages will be deleted too.",
+  "docs.deletePage.title": "Delete page",
   "docs.form.url.edit": "Edit",
   "docs.form.url.label": "URL:",
   "docs.genericModal.close": "Close",
@@ -49,17 +55,53 @@
   "docs.home.welcome.body": "Long-form knowledge for your team — documentation, specs, handbooks, decisions, postmortems. Every page lives in a Space which can be linked with Channels for convenience.",
   "docs.home.welcome.title": "Welcome to Docs.",
   "docs.leaveSpace.confirm": "Yes, leave space",
+  "docs.leaveSpace.error.generic": "Something went wrong. Please try again.",
+  "docs.leaveSpace.error.lastMember": "A space must keep at least one member with access. Add another member before you leave.",
+  "docs.leaveSpace.error.title": "Unable to leave {name}",
   "docs.leaveSpace.message": "Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.",
   "docs.leaveSpace.title": "Leave {name}",
+  "docs.page.addEmoji": "Add emoji",
+  "docs.page.byAuthor": "By {name}",
+  "docs.page.headerImage": "Header image",
+  "docs.page.untitled": "Untitled",
+  "docs.pageMenu.comingSoon": "Coming soon",
+  "docs.pageMenu.copyLink": "Copy link",
+  "docs.pageMenu.delete": "Delete page",
+  "docs.pageMenu.duplicate": "Duplicate page",
+  "docs.pageMenu.export": "Export",
+  "docs.pageMenu.export.markdown": "Markdown",
+  "docs.pageMenu.export.pdf": "PDF",
+  "docs.pageMenu.favorite": "Favorite",
+  "docs.pageMenu.label": "Page options for {title}",
+  "docs.pageMenu.moveTo": "Move to",
+  "docs.pageMenu.notifications": "Notifications",
+  "docs.pageMenu.notifications.all": "All activity",
+  "docs.pageMenu.notifications.mentions": "Mentions",
+  "docs.pageMenu.notifications.none": "Nothing",
+  "docs.pageMenu.openInNewWindow": "Open in new window",
+  "docs.pageMenu.rename": "Rename",
+  "docs.pageMenu.sharing": "Sharing and Permissions",
+  "docs.pageMenu.unfavorite": "Remove from favorites",
+  "docs.pageMenu.versionHistory": "Version history",
   "docs.pageTree.add": "Add page",
   "docs.pageTree.collapse": "Collapse {title}",
   "docs.pageTree.expand": "Expand {title}",
-  "docs.pageTree.heading": "Pages",
+  "docs.pageTree.favorited": "Favorited",
+  "docs.pageTree.menu": "Page options for {title}",
+  "docs.pageTree.overview": "Overview",
   "docs.pageTree.untitled": "Untitled",
+  "docs.renamePage.confirm": "Save",
+  "docs.renamePage.label": "Page name",
+  "docs.renamePage.title": "Rename page",
+  "docs.saveChanges.error": "There was an error saving your changes",
+  "docs.saveChanges.message": "You have unsaved changes",
+  "docs.saveChanges.reset": "Reset",
+  "docs.saveChanges.save": "Save",
   "docs.share.access.canView": "Can View",
   "docs.share.copyLink": "Copy link",
   "docs.share.handle": "@{username}",
   "docs.share.noResults": "No people found",
+  "docs.share.remove": "Remove {name}",
   "docs.share.role.admin": "Admin",
   "docs.share.search": "Add people or groups",
   "docs.share.searching": "Searching…",
@@ -70,15 +112,20 @@
   "docs.sidebar.add.browse": "Browse spaces",
   "docs.sidebar.add.create": "Create a space",
   "docs.sidebar.add.menu": "Add or browse spaces",
+  "docs.sidebar.category.favorites": "Favorites",
   "docs.sidebar.category.spaces": "Spaces",
   "docs.sidebar.createSpace": "Create a space",
   "docs.sidebar.favorites.empty": "Drag favorite items here or click the star icon on any space",
   "docs.sidebar.label": "Spaces",
   "docs.sidebar.nav.home": "Home",
+  "docs.sidebar.resize": "Resize pages sidebar",
   "docs.sidebar.search.placeholder": "Find docs",
   "docs.sidebar.space.copyLink": "Copy link",
+  "docs.sidebar.space.favorite": "Add to favorites",
+  "docs.sidebar.space.favoritePartial": "Some pages are favorited",
   "docs.sidebar.space.leave": "Leave space",
   "docs.sidebar.space.menu": "Space options for {name}",
+  "docs.sidebar.space.unfavorite": "Remove from favorites",
   "docs.sidebar.team.createTeam": "Create a team",
   "docs.sidebar.team.invite": "Invite people",
   "docs.sidebar.team.invite.secondary": "Add or invite people to the team",
@@ -87,13 +134,14 @@
   "docs.sidebar.team.members": "Manage members",
   "docs.sidebar.team.menu": "Manage {teamName}",
   "docs.sidebar.team.settings": "Team settings",
-  "docs.space.bodyPlaceholder": "Page content will appear here once the editor is available.",
   "docs.space.comments": "Comments",
   "docs.space.descriptionPlaceholder": "Add a space description here — just a brief summary of the purpose for this space.",
   "docs.space.details": "Space details",
   "docs.space.edit": "Edit",
   "docs.space.expand": "Expand",
   "docs.space.favorite": "Favorite this space",
+  "docs.space.favoritePartial": "Favorite this space (some pages are favorited)",
+  "docs.space.memberHandle": "@{username}",
   "docs.space.membersButton": "Members",
   "docs.space.membersOverflow": "+{count}",
   "docs.space.menu": "Space options",
@@ -105,19 +153,28 @@
   "docs.space.menu.settings": "Space settings",
   "docs.space.more": "More actions",
   "docs.space.pages": "Pages",
-  "docs.space.pages.toggle": "Toggle page tree",
   "docs.space.share": "Share",
   "docs.space.stat.members": "Members",
   "docs.space.stat.pages": "Pages",
   "docs.space.stat.views": "Views",
+  "docs.space.unfavorite": "Remove from favorites",
   "docs.space.updated": "Updated {relative}",
+  "docs.spaceInfo.back": "Back to space info",
   "docs.spaceInfo.close": "Close info",
   "docs.spaceInfo.created": "Created",
   "docs.spaceInfo.description": "Description",
+  "docs.spaceInfo.descriptionLabel": "Space description",
   "docs.spaceInfo.descriptionPlaceholder": "Add a space description",
+  "docs.spaceInfo.editDescription": "Edit description",
   "docs.spaceInfo.handle": "@{username}",
   "docs.spaceInfo.members": "Members",
+  "docs.spaceInfo.menu.copyLink": "Copy link",
+  "docs.spaceInfo.menu.members": "Members",
+  "docs.spaceInfo.menu.settings": "Space settings",
+  "docs.spaceInfo.menu.title": "Space info actions",
+  "docs.spaceInfo.noDescription": "No description",
   "docs.spaceInfo.pages": "Pages",
+  "docs.spaceInfo.resize": "Resize space info",
   "docs.spaceInfo.title": "Space info",
   "docs.spaceSettings.archive.button": "Archive space",
   "docs.spaceSettings.archive.confirmBody": "“{title}” and its pages will be archived and members will lose access. This can be undone by an admin.",
@@ -125,15 +182,18 @@
   "docs.spaceSettings.archive.confirmTitle": "Archive this space?",
   "docs.spaceSettings.archive.copy": "Archiving removes this space and its pages from the team. Members will lose access. You can ask an admin to restore it later.",
   "docs.spaceSettings.archive.heading": "Archive space",
-  "docs.spaceSettings.cancel": "Cancel",
   "docs.spaceSettings.configuration.comingSoon": "Space configuration options are coming soon.",
   "docs.spaceSettings.configuration.heading": "Configuration",
+  "docs.spaceSettings.discard.body": "Your unsaved changes to this space will be lost.",
+  "docs.spaceSettings.discard.confirm": "Discard changes",
+  "docs.spaceSettings.discard.title": "Discard unsaved changes?",
   "docs.spaceSettings.info.descriptionHelper": "Describe how this space should be used. This will show when browsing spaces.",
   "docs.spaceSettings.info.descriptionLabel": "Description",
   "docs.spaceSettings.info.descriptionPlaceholder": "Enter a description for this space…",
   "docs.spaceSettings.info.editUrl": "Edit",
   "docs.spaceSettings.info.heading": "Space info",
   "docs.spaceSettings.info.landingLabel": "Default landing page",
+  "docs.spaceSettings.info.landingSpaceHome": "Space home",
   "docs.spaceSettings.info.nameLabel": "Space name",
   "docs.spaceSettings.info.urlLabel": "Space URL",
   "docs.spaceSettings.navLabel": "Space settings sections",
@@ -151,7 +211,6 @@
   "docs.spaceSettings.permissions.public.title": "Public",
   "docs.spaceSettings.permissions.role.admin": "Admin",
   "docs.spaceSettings.permissions.searchPlaceholder": "Add people, groups or channels",
-  "docs.spaceSettings.save": "Save",
   "docs.spaceSettings.tab.archive": "Archive space",
   "docs.spaceSettings.tab.configuration": "Configuration",
   "docs.spaceSettings.tab.info": "Info",
@@ -163,5 +222,6 @@
   "docs.switcher.noResults": "No spaces or pages found",
   "docs.switcher.placeholder": "Search all spaces and pages",
   "docs.switcher.title": "Find docs",
-  "docs.switcher.title.query": "Find spaces or pages"
+  "docs.switcher.title.query": "Find spaces or pages",
+  "docs.toast.close": "Close"
 }
diff --git a/webapp/src/components/basic_input_modal/basic_input_modal.module.scss b/webapp/src/components/basic_input_modal/basic_input_modal.module.scss
new file mode 100644
index 0000000..16827e4
--- /dev/null
+++ b/webapp/src/components/basic_input_modal/basic_input_modal.module.scss
@@ -0,0 +1,20 @@
+.modal {
+    width: 512px;
+    max-width: calc(100vw - 48px);
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    // Vertical padding so the field's floated label (which overhangs the field's
+    // top border) isn't clipped.
+    padding: 12px 32px 20px;
+}
+
+.error {
+    color: var(--error-text);
+    font-size: 12px;
+    line-height: 16px;
+}
diff --git a/webapp/src/components/basic_input_modal/basic_input_modal.test.tsx b/webapp/src/components/basic_input_modal/basic_input_modal.test.tsx
new file mode 100644
index 0000000..71650d5
--- /dev/null
+++ b/webapp/src/components/basic_input_modal/basic_input_modal.test.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import React from 'react';
+
+import BasicInputModal from './basic_input_modal';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+const renderModal = (props: Partial<React.ComponentProps<typeof BasicInputModal>> = {}) => renderWithContext(
+    <BasicInputModal
+        title='Rename page'
+        label='Page name'
+        onConfirm={jest.fn()}
+        onClose={jest.fn()}
+        {...props}
+    />,
+);
+
+describe('BasicInputModal', () => {
+    it('seeds the field with initialValue and disables Save while it is blank', () => {
+        renderModal({initialValue: '   '});
+
+        expect(screen.getByRole('button', {name: 'Save'})).toBeDisabled();
+
+        fireEvent.change(screen.getByLabelText('Page name'), {target: {value: 'Notes'}});
+        expect(screen.getByRole('button', {name: 'Save'})).toBeEnabled();
+    });
+
+    it('confirms with the trimmed value and closes', async () => {
+        const onConfirm = jest.fn();
+        const onClose = jest.fn();
+        renderModal({initialValue: 'Old', onConfirm, onClose});
+
+        fireEvent.change(screen.getByLabelText('Page name'), {target: {value: '  New  '}});
+        fireEvent.click(screen.getByRole('button', {name: 'Save'}));
+
+        await waitFor(() => expect(onConfirm).toHaveBeenCalledWith('New'));
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('submits on Enter in the field', async () => {
+        const onConfirm = jest.fn();
+        renderModal({initialValue: 'Old', onConfirm});
+
+        fireEvent.keyDown(screen.getByLabelText('Page name'), {key: 'Enter'});
+
+        await waitFor(() => expect(onConfirm).toHaveBeenCalledWith('Old'));
+    });
+
+    it('keeps the modal open and shows the failure inline when onConfirm rejects', async () => {
+        const onClose = jest.fn();
+        renderModal({
+            initialValue: 'Old',
+            onConfirm: jest.fn().mockRejectedValue(new Error('Someone else edited this page')),
+            onClose,
+        });
+
+        fireEvent.click(screen.getByRole('button', {name: 'Save'}));
+
+        await waitFor(() => expect(screen.getByText('Someone else edited this page')).toBeInTheDocument());
+        expect(onClose).not.toHaveBeenCalled();
+    });
+});
diff --git a/webapp/src/components/basic_input_modal/basic_input_modal.tsx b/webapp/src/components/basic_input_modal/basic_input_modal.tsx
new file mode 100644
index 0000000..310e83c
--- /dev/null
+++ b/webapp/src/components/basic_input_modal/basic_input_modal.tsx
@@ -0,0 +1,133 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useId, useState} from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {PrimaryButton, TertiaryButton} from 'components/form_controls/button';
+import TextArea from 'components/form_controls/text_area';
+import TextInput from 'components/form_controls/text_input';
+import GenericModal from 'components/generic_modal/generic_modal';
+
+import styles from './basic_input_modal.module.scss';
+
+// Rows for the multiline field; matches the description box in Space Settings.
+const MULTILINE_ROWS = 4;
+
+type Props = {
+    title: React.ReactNode;
+    label: string;
+    initialValue?: string;
+    confirmButtonText?: React.ReactNode;
+    maxLength?: number;
+
+    /** Renders a textarea instead of a single-line input. */
+    multiline?: boolean;
+
+    /**
+     * Allows confirming with an empty value, for fields that can be cleared
+     * (e.g. removing a description). Off by default so renames stay required.
+     */
+    allowEmpty?: boolean;
+
+    /** Rejecting keeps the modal open and surfaces the reason inline. */
+    onConfirm: (value: string) => void | Promise<void>;
+    onClose: () => void;
+};
+
+/**
+ * A one-field modal for short renames and single prompts, single- or multiline.
+ * The caller supplies the copy and the confirm handler; this owns the value, the
+ * saving state and the inline error.
+ */
+const BasicInputModal = ({title, label, initialValue = '', confirmButtonText, maxLength, multiline = false, allowEmpty = false, onConfirm, onClose}: Props) => {
+    const inputId = useId();
+
+    const [value, setValue] = useState(initialValue);
+    const [error, setError] = useState<string>();
+    const [saving, setSaving] = useState(false);
+
+    const trimmed = value.trim();
+    const canConfirm = (allowEmpty || Boolean(trimmed)) && !saving;
+
+    const confirm = async () => {
+        if (!canConfirm) {
+            return;
+        }
+        setSaving(true);
+        setError(undefined);
+        try {
+            await onConfirm(trimmed);
+            onClose();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setSaving(false);
+        }
+    };
+
+    const footer = (
+        <>
+            <TertiaryButton
+                type='button'
+                onClick={onClose}
+            >
+                <FormattedMessage
+                    id='docs.basicInputModal.cancel'
+                    defaultMessage='Cancel'
+                />
+            </TertiaryButton>
+            <PrimaryButton
+                type='button'
+                disabled={!canConfirm}
+                onClick={confirm}
+            >
+                {confirmButtonText ?? (
+                    <FormattedMessage
+                        id='docs.basicInputModal.confirm'
+                        defaultMessage='Save'
+                    />
+                )}
+            </PrimaryButton>
+        </>
+    );
+
+    return (
+        <GenericModal
+            className={styles.modal}
+            title={title}
+            ariaLabel={typeof title === 'string' ? title : undefined}
+            onClose={onClose}
+            footer={footer}
+            headerDivider={false}
+        >
+            <div className={styles.body}>
+                {multiline ? (
+
+                    // No Enter-to-submit: newlines are part of the value.
+                    <TextArea
+                        id={inputId}
+                        label={label}
+                        value={value}
+                        onChange={setValue}
+                        maxLength={maxLength}
+                        rows={MULTILINE_ROWS}
+                        autoFocus={true}
+                    />
+                ) : (
+                    <TextInput
+                        id={inputId}
+                        label={label}
+                        value={value}
+                        onChange={setValue}
+                        maxLength={maxLength}
+                        autoFocus={true}
+                        onEnter={confirm}
+                    />
+                )}
+                {error && <div className={styles.error}>{error}</div>}
+            </div>
+        </GenericModal>
+    );
+};
+
+export default BasicInputModal;
diff --git a/webapp/src/components/delete_page_modal/delete_page_modal.tsx b/webapp/src/components/delete_page_modal/delete_page_modal.tsx
new file mode 100644
index 0000000..a135da3
--- /dev/null
+++ b/webapp/src/components/delete_page_modal/delete_page_modal.tsx
@@ -0,0 +1,78 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useDocsNavigation} from 'hooks/navigation';
+import {useAppDispatch} from 'hooks/redux';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {deletePage} from 'store/actions';
+
+import ConfirmModal from 'components/confirm_modal/confirm_modal';
+import {toast} from 'components/toast';
+
+type Props = {
+    spaceId: string;
+    pageId: string;
+    pageTitle: string;
+    onClose: () => void;
+};
+
+/**
+ * Confirms deleting a page and its subpages. Deleting the page currently routed
+ * to leaves nothing to show, so the viewer is sent home.
+ */
+const DeletePageModal = ({spaceId, pageId, pageTitle, onClose}: Props) => {
+    const dispatch = useAppDispatch();
+    const {pageId: routedPageId, goHome} = useDocsNavigation();
+
+    const confirm = async () => {
+        try {
+            await dispatch(deletePage(spaceId, pageId));
+            if (routedPageId === pageId) {
+                goHome();
+            }
+        } catch (error) {
+            toast.error(
+                <FormattedMessage
+                    id='docs.deletePage.error'
+                    defaultMessage='Could not delete “{title}”.'
+                    values={{title: pageTitle}}
+                />,
+                {description: error instanceof Error ? error.message : String(error)},
+            );
+        }
+        onClose();
+    };
+
+    return (
+        <ConfirmModal
+            title={(
+                <FormattedMessage
+                    id='docs.deletePage.title'
+                    defaultMessage='Delete page'
+                />
+            )}
+            confirmButtonText={(
+                <FormattedMessage
+                    id='docs.deletePage.confirm'
+                    defaultMessage='Delete'
+                />
+            )}
+            isConfirmDestructive={true}
+            onConfirm={confirm}
+            onCancel={onClose}
+        >
+            <FormattedMessage
+                id='docs.deletePage.message'
+                defaultMessage='Are you sure you want to delete <b>{title}</b>? Its subpages will be deleted too.'
+                values={{
+                    title: pageTitle,
+                    b: (chunks) => <b>{chunks}</b>,
+                }}
+            />
+        </ConfirmModal>
+    );
+};
+
+export default DeletePageModal;
diff --git a/webapp/src/components/docs_home/docs_home.tsx b/webapp/src/components/docs_home/docs_home.tsx
index c883f17..1702e69 100644
--- a/webapp/src/components/docs_home/docs_home.tsx
+++ b/webapp/src/components/docs_home/docs_home.tsx
@@ -169,14 +169,14 @@ const SpaceCard = ({summary, onOpen}: {summary: SpaceSummary; onOpen: (id: strin
 
     // Timestamp's `style` is a narrow/short/long format variant, not a DOM style object.
     /* eslint-disable react/style-prop-object */
-    const relative = lastViewedAt !== undefined && Timestamp ? (
+    const relative = lastViewedAt === undefined ? null : (
         <Timestamp
             value={lastViewedAt}
             units={VIEWED_TIME_SPEC}
             useTime={false}
             style='narrow'
         />
-    ) : null;
+    );
     /* eslint-enable react/style-prop-object */
 
     return (
diff --git a/webapp/src/components/docs_root/docs_main_content.tsx b/webapp/src/components/docs_root/docs_main_content.tsx
index 0b633f3..0376b64 100644
--- a/webapp/src/components/docs_root/docs_main_content.tsx
+++ b/webapp/src/components/docs_root/docs_main_content.tsx
@@ -1,34 +1,62 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {useDocsNavigation} from 'hooks/navigation';
+import {useAppSelector} from 'hooks/redux';
 import {useSpace} from 'hooks/spaces';
 import React from 'react';
+import {Redirect, Route, Switch} from 'react-router-dom';
+import {DOCS_DRAFT_ROUTE, DOCS_SPACE_OVERVIEW_ROUTE, DOCS_SPACE_ROUTE} from 'routing/paths';
+
+import {areSpacesLoadedForCurrentTeam} from 'store/selectors';
 
 import DocsHome from 'components/docs_home/docs_home';
 import SpaceView from 'components/space_view/space_view';
 
 type Props = {
-    spaceId?: string;
-    pageId?: string;
     onCreateSpace: () => void;
     onBrowseSpaces: () => void;
 };
 
-// No routed space → the product Home; a routed space → its main content view
-// (the page editor within it is mounted later).
-const DocsMainContent = ({spaceId, onCreateSpace, onBrowseSpaces}: Props) => {
+// Routes the product's main column: a routed space renders its view, the product
+// root (anything else) renders Home.
+const DocsMainContent = ({onCreateSpace, onBrowseSpaces}: Props) => {
+    const home = (
+        <DocsHome
+            onCreateSpace={onCreateSpace}
+            onBrowseSpaces={onBrowseSpaces}
+        />
+    );
+
+    return (
+        <Switch>
+            {/* The draft pattern is listed first: the generic space route would
+                otherwise capture 'drafts' as the page id. Both render the space
+                view, which reads the parsed selection from the URL. */}
+            <Route path={[DOCS_DRAFT_ROUTE, DOCS_SPACE_OVERVIEW_ROUTE, DOCS_SPACE_ROUTE]}>
+                <RoutedSpaceView/>
+            </Route>
+            <Route>{home}</Route>
+        </Switch>
+    );
+};
+
+// Resolves the routed space id against the store. Once the team's spaces are
+// loaded, an id that still isn't there names a space the user can't see (or one
+// that's gone), so the URL is corrected to the product home; until then the id
+// may simply not have arrived, so nothing renders rather than flashing Home.
+const RoutedSpaceView = () => {
+    const {spaceId, paths} = useDocsNavigation();
     const space = useSpace(spaceId);
+    const spacesLoaded = useAppSelector(areSpacesLoadedForCurrentTeam);
 
-    if (!space) {
-        return (
-            <DocsHome
-                onCreateSpace={onCreateSpace}
-                onBrowseSpaces={onBrowseSpaces}
-            />
-        );
+    if (space) {
+        return <SpaceView space={space}/>;
     }
-
-    return <SpaceView space={space}/>;
+    if (spacesLoaded) {
+        return <Redirect to={paths.home()}/>;
+    }
+    return null;
 };
 
 export default DocsMainContent;
diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index 3e1f074..d8dc03e 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -9,7 +9,9 @@ import {useHotkeys} from 'react-hotkeys-hook';
 
 import CreateSpaceModal from 'components/create_space_modal/create_space_modal';
 import DocsSwitcher from 'components/docs_switcher/docs_switcher';
+import {DocsModalController, openDocsModal} from 'components/modals';
 import SpacesSidebar from 'components/spaces_sidebar/spaces_sidebar';
+import {DocsToaster} from 'components/toast';
 
 import DocsMainContent from './docs_main_content';
 import styles from './docs_root.module.scss';
@@ -17,7 +19,7 @@ import styles from './docs_root.module.scss';
 const DocsRoot = () => {
     useBootstrapDocs();
 
-    const {spaceId, pageId} = useDocsNavigation();
+    const {spaceId} = useDocsNavigation();
 
     useRecordSpaceView(spaceId);
 
@@ -25,9 +27,9 @@ const DocsRoot = () => {
     const openSwitcher = useCallback(() => setSwitcherOpen(true), []);
     const closeSwitcher = useCallback(() => setSwitcherOpen(false), []);
 
-    const [createSpaceOpen, setCreateSpaceOpen] = useState(false);
-    const openCreateSpace = useCallback(() => setCreateSpaceOpen(true), []);
-    const closeCreateSpace = useCallback(() => setCreateSpaceOpen(false), []);
+    const openCreateSpace = useCallback(() => {
+        openDocsModal((modal) => <CreateSpaceModal onClose={modal.close}/>);
+    }, []);
 
     // stopPropagation so the Docs switcher wins the shortcut over the host's.
     useHotkeys('mod+k', (e) => {
@@ -45,14 +47,13 @@ const DocsRoot = () => {
             </div>
             <main className={styles.main}>
                 <DocsMainContent
-                    spaceId={spaceId}
-                    pageId={pageId}
                     onCreateSpace={openCreateSpace}
                     onBrowseSpaces={openSwitcher}
                 />
             </main>
             {switcherOpen && <DocsSwitcher onClose={closeSwitcher}/>}
-            {createSpaceOpen && <CreateSpaceModal onClose={closeCreateSpace}/>}
+            <DocsModalController/>
+            <DocsToaster/>
         </div>
     );
 };
diff --git a/webapp/src/components/docs_switcher/docs_switcher.tsx b/webapp/src/components/docs_switcher/docs_switcher.tsx
index 65b6263..2050a62 100644
--- a/webapp/src/components/docs_switcher/docs_switcher.tsx
+++ b/webapp/src/components/docs_switcher/docs_switcher.tsx
@@ -6,7 +6,7 @@ import {useDocsSearch, useRecentDocs} from 'hooks/docs';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
 import {useAllSpaces} from 'hooks/spaces';
-import {useTeamNamesById} from 'hooks/team';
+import {useTeamContext, useTeamDisplayNamesById, useTeamNamesById} from 'hooks/team';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
@@ -17,6 +17,7 @@ import TextBoxOutlineIcon from '@mattermost/compass-icons/components/text-box-ou
 import {fetchAllSpaces} from 'store/actions';
 
 import GenericModal from 'components/generic_modal/generic_modal';
+import Spacer from 'components/spacer/spacer';
 
 import type {Page, Space} from 'types/docs';
 
@@ -55,12 +56,21 @@ const DocsSwitcher = ({onClose}: Props) => {
     const recent = useRecentDocs();
     const results = useDocsSearch(query);
     const teamNamesById = useTeamNamesById();
+    const teamDisplayNamesById = useTeamDisplayNamesById();
+    const {id: currentTeamId} = useTeamContext();
 
     // Cross-team: each space's title and owning team, so a result can render its
     // space label and route to that space's own team.
     const spaceMetaById = useMemo(
-        () => new Map(allSpaces.map((space) => [space.id, {title: space.title, teamName: teamNamesById.get(space.team_id)}])),
-        [allSpaces, teamNamesById],
+        () => new Map(allSpaces.map((space) => [space.id, {
+            title: space.title,
+            teamName: teamNamesById.get(space.team_id),
+
+            // Only set for a space outside the current team, so the result can be
+            // labelled with the team it actually lives in.
+            otherTeam: space.team_id === currentTeamId ? undefined : teamDisplayNamesById.get(space.team_id),
+        }])),
+        [allSpaces, teamNamesById, teamDisplayNamesById, currentTeamId],
     );
 
     const groups: Group[] = useMemo(() => {
@@ -155,36 +165,43 @@ const DocsSwitcher = ({onClose}: Props) => {
     const title = hasQuery ? formatMessage({id: 'docs.switcher.title.query', defaultMessage: 'Find spaces or pages'}) : formatMessage({id: 'docs.switcher.title', defaultMessage: 'Find docs'});
     const placeholder = formatMessage({id: 'docs.switcher.placeholder', defaultMessage: 'Search all spaces and pages'});
 
-    const renderEntry = (entry: Entry) => (
-        <button
-            key={entry.key}
-            id={optionId(entry.index)}
-            type='button'
-            role='option'
-            aria-selected={entry.index === active}
-            className={classNames(styles.item, {[styles.active]: entry.index === active})}
-            onMouseMove={() => setActiveIndex(entry.index)}
-            onClick={() => selectEntry(entry)}
-        >
-            {entry.kind === 'space' ? (
-                <>
-                    <span className={classNames(styles.itemIcon, styles.itemIconEmoji)}>
-                        <SpaceIcon
-                            space={entry.space}
-                            size={16}
-                        />
-                    </span>
-                    <span className={styles.itemLabel}>{entry.space.title}</span>
-                </>
-            ) : (
-                <>
-                    <span className={styles.itemIcon}><TextBoxOutlineIcon size={16}/></span>
-                    <span className={styles.itemLabel}>{entry.page.title}</span>
-                    <span className={styles.itemMeta}>{spaceMetaById.get(entry.page.space_id)?.title}</span>
-                </>
-            )}
-        </button>
-    );
+    const renderEntry = (entry: Entry) => {
+        // The trailing slot names where a result lives: a space in another team is
+        // labelled with that team, a page with its space.
+        const meta = entry.kind === 'space' ? spaceMetaById.get(entry.space.id)?.otherTeam : spaceMetaById.get(entry.page.space_id)?.title;
+
+        return (
+            <button
+                key={entry.key}
+                id={optionId(entry.index)}
+                type='button'
+                role='option'
+                aria-selected={entry.index === active}
+                className={classNames(styles.item, {[styles.active]: entry.index === active})}
+                onMouseMove={() => setActiveIndex(entry.index)}
+                onClick={() => selectEntry(entry)}
+            >
+                {entry.kind === 'space' ? (
+                    <>
+                        <span className={classNames(styles.itemIcon, styles.itemIconEmoji)}>
+                            <SpaceIcon
+                                space={entry.space}
+                                size={16}
+                            />
+                        </span>
+                        <span className={styles.itemLabel}>{entry.space.title}</span>
+                    </>
+                ) : (
+                    <>
+                        <span className={styles.itemIcon}><TextBoxOutlineIcon size={16}/></span>
+                        <span className={styles.itemLabel}>{entry.page.title}</span>
+                    </>
+                )}
+                <Spacer/>
+                {meta && <span className={styles.itemMeta}>{meta}</span>}
+            </button>
+        );
+    };
 
     const searchField = (
         <div className={styles.inputWrap}>
diff --git a/webapp/src/components/form_controls/button.tsx b/webapp/src/components/form_controls/button.tsx
index 5d7e1ee..3d62041 100644
--- a/webapp/src/components/form_controls/button.tsx
+++ b/webapp/src/components/form_controls/button.tsx
@@ -1,37 +1,97 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React from 'react';
 
-import {Button} from '@mattermost/shared/components/button';
-import type {ButtonProps} from '@mattermost/shared/components/button';
+import {Button as SharedButton} from '@mattermost/shared/components/button';
+import type {ButtonProps as SharedButtonProps} from '@mattermost/shared/components/button';
+import {WithTooltip} from '@mattermost/shared/components/tooltip';
 
 // Neutral-grey treatment for `btn-icon` and `docs-btn-neutral` ghost buttons
-// (the shared Button is accent-only); loaded as a side effect so it applies
-// wherever these buttons render.
-import './button_neutral.module.scss';
+// (the shared Button is accent-only), plus the badge overlay; the :global rules
+// apply wherever these buttons render.
+import styles from './button_neutral.module.scss';
 
 // The Docs plugin avoids styled-components (its browser ESM references `process`
 // and throws in the plugin runtime), so these are plain functional wrappers that
 // bind the emphasis/variant preset.
 
+type ContentProps = Omit<SharedButtonProps, 'children'> & {
+
+    /** Icon rendered before `children`. */
+    leadingIcon?: React.ReactNode;
+
+    /** Icon rendered after `children`. */
+    trailingIcon?: React.ReactNode;
+
+    /**
+     * Overlay indicator. `true` renders an unread dot; a number or string
+     * renders a count pill.
+     */
+    badge?: number | string | true;
+
+    /**
+     * Wraps the button in a hover tooltip. A string tooltip also supplies the
+     * accessible name when `aria-label` is omitted.
+     */
+    tooltip?: React.ReactNode;
+};
+
+// Icon-only buttons (no children) carry no text, so they must name themselves.
+type LabelledProps = {children: React.ReactNode};
+type IconOnlyProps = {children?: undefined} & ({'aria-label': string} | {tooltip: string});
+
+export type ButtonProps = ContentProps & (LabelledProps | IconOnlyProps);
+
 // The preset is applied first so an explicit prop can still override it.
-function createButton(displayName: string, preset: Pick<ButtonProps, 'emphasis' | 'variant'>) {
-    const Wrapped = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
-        <Button
-            ref={ref}
-            {...preset}
-            {...props}
-        />
-    ));
+function createButton(displayName: string, preset: Pick<SharedButtonProps, 'emphasis' | 'variant'>) {
+    const Wrapped = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+        const {
+            'aria-label': ariaLabel,
+            badge,
+            children,
+            className,
+            leadingIcon,
+            tooltip,
+            trailingIcon,
+            ...rest
+        } = props;
+
+        const button = (
+            <SharedButton
+                ref={ref}
+                type='button'
+                {...preset}
+                {...rest}
+                aria-label={ariaLabel ?? (typeof tooltip === 'string' ? tooltip : undefined)}
+                className={classNames(className, {[styles.badged]: badge !== undefined})}
+            >
+                {leadingIcon}
+                {children}
+                {trailingIcon}
+                {badge === true && (
+                    <span
+                        className={styles.badgeDot}
+                        aria-hidden='true'
+                    />
+                )}
+                {badge !== undefined && badge !== true && (
+                    <span className={styles.badgeCount}>{badge}</span>
+                )}
+            </SharedButton>
+        );
+
+        return tooltip ? <WithTooltip title={tooltip}>{button}</WithTooltip> : button;
+    });
     Wrapped.displayName = displayName;
     return Wrapped;
 }
 
+export const Button = createButton('Button', {});
 export const PrimaryButton = createButton('PrimaryButton', {emphasis: 'primary'});
 export const SecondaryButton = createButton('SecondaryButton', {emphasis: 'secondary'});
 export const TertiaryButton = createButton('TertiaryButton', {emphasis: 'tertiary'});
 export const DestructiveButton = createButton('DestructiveButton', {emphasis: 'primary', variant: 'destructive'});
 
-export {Button};
-export type {ButtonProps};
+export type {SharedButtonProps};
diff --git a/webapp/src/components/form_controls/button_neutral.module.scss b/webapp/src/components/form_controls/button_neutral.module.scss
index 549681a..5dee77f 100644
--- a/webapp/src/components/form_controls/button_neutral.module.scss
+++ b/webapp/src/components/form_controls/button_neutral.module.scss
@@ -11,6 +11,42 @@
  * until a neutral emphasis exists upstream.
  */
 
+// Badge overlay (see the `badge` prop on the Button wrappers). Local classes —
+// the wrapper imports this stylesheet for both the badge and the rules below.
+.badged {
+    position: relative;
+}
+
+.badgeDot {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid var(--center-channel-bg);
+    border-radius: 50%;
+    background: var(--button-bg);
+}
+
+.badgeCount {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    display: flex;
+    min-width: 16px;
+    height: 16px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+    border: 2px solid var(--center-channel-bg);
+    border-radius: 8px;
+    background: var(--button-bg);
+    color: var(--button-color);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 12px;
+}
+
 // Base — neutral grey.
 :global(.btn.btn-icon.btn-quaternary),
 :global(.btn.btn-quaternary.docs-btn-neutral) {
diff --git a/webapp/src/components/form_controls/select.module.scss b/webapp/src/components/form_controls/select.module.scss
new file mode 100644
index 0000000..5d88212
--- /dev/null
+++ b/webapp/src/components/form_controls/select.module.scss
@@ -0,0 +1,112 @@
+// Same chrome as TextInput: bordered field with the label floated over its top
+// border, a leading icon, the value, and a trailing chevron.
+.trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 10px 16px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: var(--center-channel-bg);
+    cursor: pointer;
+    text-align: left;
+
+    &:hover {
+        border-color: rgba(var(--center-channel-color-rgb), 0.24);
+    }
+
+    &[data-popup-open],
+    &:focus-visible {
+        border-color: var(--button-bg);
+        box-shadow: inset 0 0 0 1px var(--button-bg);
+        outline: none;
+    }
+
+    &[data-disabled] {
+        background: rgba(var(--center-channel-color-rgb), 0.04);
+        cursor: not-allowed;
+    }
+}
+
+.label {
+    position: absolute;
+    top: 0;
+    left: 12px;
+    padding: 0 4px;
+    background: var(--center-channel-bg);
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 10px;
+    line-height: 12px;
+    transform: translateY(-50%);
+}
+
+.leadingIcon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.value {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chevron {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.positioner {
+    z-index: var(--z-index-menu);
+}
+
+.popup {
+    min-width: var(--anchor-width);
+    max-height: 320px;
+    padding: 8px 0;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: var(--center-channel-bg);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    overflow-y: auto;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    cursor: pointer;
+
+    // Base UI highlights the focused item (keyboard or pointer) via this attr.
+    &[data-highlighted] {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        outline: none;
+    }
+}
+
+.itemText {
+    flex: 1 1 auto;
+}
+
+.indicator {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--button-bg);
+}
diff --git a/webapp/src/components/form_controls/select.tsx b/webapp/src/components/form_controls/select.tsx
new file mode 100644
index 0000000..3a67ee6
--- /dev/null
+++ b/webapp/src/components/form_controls/select.tsx
@@ -0,0 +1,104 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Select as BaseSelect} from '@base-ui-components/react/select';
+import classNames from 'classnames';
+import React from 'react';
+
+import CheckIcon from '@mattermost/compass-icons/components/check';
+import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
+
+import styles from './select.module.scss';
+
+export type SelectOption = {
+    value: string;
+    label: string;
+    leadingIcon?: React.ReactNode;
+};
+
+type Props = {
+    id: string;
+
+    /** Floated label above the field, matching TextInput. */
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+    disabled?: boolean;
+};
+
+/**
+ * A single-select field with the same floated-label chrome as TextInput. Built
+ * on Base UI's Select, so keyboard navigation, typeahead and the listbox
+ * semantics come from the primitive.
+ */
+const Select = ({id, label, value, options, onChange, disabled}: Props) => {
+    const selected = options.find((option) => option.value === value);
+
+    return (
+        <BaseSelect.Root
+            value={value}
+            disabled={disabled}
+            onValueChange={(next) => onChange(next == null ? '' : String(next))}
+        >
+            <BaseSelect.Trigger
+                id={id}
+                className={styles.trigger}
+            >
+                <span className={styles.label}>{label}</span>
+                {selected?.leadingIcon && (
+                    <span
+                        className={styles.leadingIcon}
+                        aria-hidden={true}
+                    >
+                        {selected.leadingIcon}
+                    </span>
+                )}
+                <span className={styles.value}>
+                    <BaseSelect.Value>{selected?.label ?? ''}</BaseSelect.Value>
+                </span>
+                <BaseSelect.Icon className={styles.chevron}>
+                    <ChevronDownIcon size={16}/>
+                </BaseSelect.Icon>
+            </BaseSelect.Trigger>
+            <BaseSelect.Portal>
+                <BaseSelect.Positioner
+                    className={styles.positioner}
+                    side='bottom'
+                    align='start'
+                    sideOffset={4}
+                    collisionPadding={8}
+                >
+                    <BaseSelect.Popup className={styles.popup}>
+                        <BaseSelect.List>
+                            {options.map((option) => (
+                                <BaseSelect.Item
+                                    key={option.value}
+                                    value={option.value}
+                                    className={styles.item}
+                                >
+                                    {option.leadingIcon && (
+                                        <span
+                                            className={styles.leadingIcon}
+                                            aria-hidden={true}
+                                        >
+                                            {option.leadingIcon}
+                                        </span>
+                                    )}
+                                    <BaseSelect.ItemText className={classNames(styles.value, styles.itemText)}>
+                                        {option.label}
+                                    </BaseSelect.ItemText>
+                                    <BaseSelect.ItemIndicator className={styles.indicator}>
+                                        <CheckIcon size={16}/>
+                                    </BaseSelect.ItemIndicator>
+                                </BaseSelect.Item>
+                            ))}
+                        </BaseSelect.List>
+                    </BaseSelect.Popup>
+                </BaseSelect.Positioner>
+            </BaseSelect.Portal>
+        </BaseSelect.Root>
+    );
+};
+
+export default Select;
diff --git a/webapp/src/components/form_controls/text_area.tsx b/webapp/src/components/form_controls/text_area.tsx
index faddf58..f21275e 100644
--- a/webapp/src/components/form_controls/text_area.tsx
+++ b/webapp/src/components/form_controls/text_area.tsx
@@ -16,9 +16,10 @@ type Props = {
     error?: string;
     maxLength?: number;
     rows?: number;
+    autoFocus?: boolean;
 };
 
-const TextArea = ({id, label, value, onChange, error, maxLength, rows = 3}: Props) => {
+const TextArea = ({id, label, value, onChange, error, maxLength, rows = 3, autoFocus}: Props) => {
     const errorId = error ? `${id}-error` : undefined;
 
     return (
@@ -33,6 +34,7 @@ const TextArea = ({id, label, value, onChange, error, maxLength, rows = 3}: Prop
                 value={value}
                 rows={rows}
                 maxLength={maxLength}
+                autoFocus={autoFocus}
                 onChange={(e) => onChange(e.target.value)}
             />
             {error && (
diff --git a/webapp/src/components/generic_modal/generic_modal.module.scss b/webapp/src/components/generic_modal/generic_modal.module.scss
index c161c34..7a70ed7 100644
--- a/webapp/src/components/generic_modal/generic_modal.module.scss
+++ b/webapp/src/components/generic_modal/generic_modal.module.scss
@@ -41,17 +41,31 @@
     flex-direction: column;
     gap: 24px;
     padding: 24px 32px;
+}
+
+// Opt-in divider under the header (on by default via the component).
+.headerDivider {
     border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
 }
 
+// Title grows; the actions slot and close button sit at the right edge.
 .titleRow {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     gap: 10px;
 }
 
+.titleActions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+}
+
+// Grows so the actions slot and close button are pushed to the right edge.
 .title {
+    flex: 1 1 auto;
+    min-width: 0;
     margin: 0;
     color: var(--center-channel-color);
     font-family: 'Metropolis', sans-serif;
@@ -69,6 +83,11 @@
     padding: 24px 32px;
 }
 
+// Opt-in divider between the body and footer actions.
+.footerDivider {
+    border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+}
+
 .close {
     display: flex;
     flex-shrink: 0;
diff --git a/webapp/src/components/generic_modal/generic_modal.tsx b/webapp/src/components/generic_modal/generic_modal.tsx
index d14cf98..ace6fba 100644
--- a/webapp/src/components/generic_modal/generic_modal.tsx
+++ b/webapp/src/components/generic_modal/generic_modal.tsx
@@ -19,12 +19,24 @@ type Props = {
     headerClassName?: string;
     initialFocus?: React.RefObject<HTMLElement | null>;
     showCloseButton?: boolean;
+
+    /**
+     * Content aligned to the right of the title, before the close button — for
+     * actions that belong to the header rather than the body or footer.
+     */
+    titleActions?: React.ReactNode;
     headerContent?: React.ReactNode;
     footer?: React.ReactNode;
+
+    /** Divider under the header. On by default; opt out for minimal modals. */
+    headerDivider?: boolean;
+
+    /** Renders a divider between the body and the footer actions. */
+    footerDivider?: boolean;
     children: React.ReactNode;
 };
 
-const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, initialFocus, showCloseButton = true, headerContent, footer, children}: Props) => {
+const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, initialFocus, showCloseButton = true, titleActions, headerContent, footer, headerDivider = true, footerDivider = false, children}: Props) => {
     const {formatMessage} = useIntl();
     const closeLabel = formatMessage({id: 'docs.genericModal.close', defaultMessage: 'Close'});
 
@@ -49,11 +61,12 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
                         initialFocus={initialFocus}
                         aria-label={ariaLabel}
                     >
-                        <div className={classNames(styles.header, headerClassName)}>
+                        <div className={classNames(styles.header, {[styles.headerDivider]: headerDivider}, headerClassName)}>
                             <div className={styles.titleRow}>
                                 <Dialog.Title render={<h1 className={styles.title}/>}>
                                     {title}
                                 </Dialog.Title>
+                                {titleActions != null && <div className={styles.titleActions}>{titleActions}</div>}
                                 {showCloseButton && (
                                     <WithTooltip title={closeLabel}>
                                         <Dialog.Close
@@ -73,7 +86,7 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
                             {headerContent}
                         </div>
                         {children}
-                        {footer && <div className={styles.footer}>{footer}</div>}
+                        {footer && <div className={classNames(styles.footer, {[styles.footerDivider]: footerDivider})}>{footer}</div>}
                     </Dialog.Popup>
                 </div>
             </Dialog.Portal>
diff --git a/webapp/src/components/menu/menu.module.scss b/webapp/src/components/menu/menu.module.scss
index 3403a23..b17365e 100644
--- a/webapp/src/components/menu/menu.module.scss
+++ b/webapp/src/components/menu/menu.module.scss
@@ -49,10 +49,21 @@
     }
 }
 
+// Base UI marks the submenu trigger while its popup is open, so it keeps the
+// highlight after the pointer moves into the nested menu.
+.submenuTrigger[data-popup-open] {
+    background: rgba(var(--center-channel-color-rgb), 0.08);
+}
+
 .destructive {
     color: var(--error-text);
 }
 
+.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
 .link {
     color: var(--link-color);
 }
@@ -89,3 +100,14 @@
     font-size: 12px;
     line-height: 16px;
 }
+
+.itemTrailing {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.destructive .itemTrailing {
+    color: var(--error-text);
+}
diff --git a/webapp/src/components/menu/menu.test.tsx b/webapp/src/components/menu/menu.test.tsx
index 8b0d3ad..a4307c8 100644
--- a/webapp/src/components/menu/menu.test.tsx
+++ b/webapp/src/components/menu/menu.test.tsx
@@ -5,23 +5,30 @@ import {fireEvent, screen, waitFor} from '@testing-library/react';
 import React from 'react';
 
 import Menu from './menu';
-import type {MenuItemSpec} from './menu_types';
 
 import {renderWithContext} from '../../../tests/react_testing_utils';
 
-function renderMenu(items: MenuItemSpec[]) {
+function renderMenu(onRename: () => void) {
     return renderWithContext(
         <Menu
             ariaLabel='Space actions'
-            items={items}
             trigger={<button type='button'>{'Open menu'}</button>}
-        />,
+        >
+            <Menu.Item onClick={onRename}>{'Rename'}</Menu.Item>
+            <Menu.Separator/>
+            <Menu.Item
+                destructive={true}
+                onClick={jest.fn()}
+            >
+                {'Delete'}
+            </Menu.Item>
+        </Menu>,
     );
 }
 
 describe('Menu', () => {
     it('renders the trigger and keeps items closed initially', () => {
-        renderMenu([{id: 'a', label: 'Rename', onClick: jest.fn()}]);
+        renderMenu(jest.fn());
 
         expect(screen.getByRole('button', {name: 'Open menu'})).toBeInTheDocument();
         expect(screen.queryByText('Rename')).not.toBeInTheDocument();
@@ -29,10 +36,7 @@ describe('Menu', () => {
 
     it('opens on trigger click and fires the item handler', async () => {
         const onClick = jest.fn();
-        renderMenu([
-            {id: 'rename', label: 'Rename', onClick},
-            {id: 'delete', label: 'Delete', onClick: jest.fn(), isDestructive: true, hasDivider: true},
-        ]);
+        renderMenu(onClick);
 
         fireEvent.click(screen.getByRole('button', {name: 'Open menu'}));
 
diff --git a/webapp/src/components/menu/menu.tsx b/webapp/src/components/menu/menu.tsx
index c082e17..b00efef 100644
--- a/webapp/src/components/menu/menu.tsx
+++ b/webapp/src/components/menu/menu.tsx
@@ -5,23 +5,149 @@ import {Menu as BaseMenu} from '@base-ui-components/react/menu';
 import classNames from 'classnames';
 import React from 'react';
 
+import ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 
 import styles from './menu.module.scss';
-import type {MenuItemSpec} from './menu_types';
 
-type Props = {
+type MenuProps = {
     ariaLabel: string;
-    items: MenuItemSpec[];
     align?: 'left' | 'right';
     tooltip?: string;
 
     // Base UI merges its own open/aria/ref props onto the trigger element.
     trigger: React.ReactElement;
+    children: React.ReactNode;
 };
 
-// Portals to the body so it is never clipped by the sidebar's overflow.
-const Menu = ({ariaLabel, items, align = 'left', tooltip, trigger}: Props) => (
+type ItemProps = {
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    secondaryLabel?: React.ReactNode;
+    destructive?: boolean;
+    disabled?: boolean;
+    closeOnClick?: boolean;
+    onClick?: () => void;
+    children: React.ReactNode;
+};
+
+type LinkItemProps = ItemProps & {
+    href: string;
+    external?: boolean;
+};
+
+type SubmenuProps = {
+    label: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    ariaLabel?: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+};
+
+const ItemBody = ({leadingIcon, trailingIcon, secondaryLabel, children}: Pick<ItemProps, 'leadingIcon' | 'trailingIcon' | 'secondaryLabel' | 'children'>) => (
+    <>
+        {leadingIcon && <span className={styles.itemIcon}>{leadingIcon}</span>}
+        <span className={styles.itemText}>
+            <span className={styles.itemLabel}>{children}</span>
+            {secondaryLabel && <span className={styles.itemSecondary}>{secondaryLabel}</span>}
+        </span>
+        {trailingIcon && <span className={styles.itemTrailing}>{trailingIcon}</span>}
+    </>
+);
+
+/**
+ * An interactive menu item. Renders as a button-like row.
+ */
+const MenuItem = ({leadingIcon, trailingIcon, secondaryLabel, destructive, disabled, closeOnClick, onClick, children}: ItemProps) => (
+    <BaseMenu.Item
+        className={classNames(styles.item, {
+            [styles.destructive]: destructive,
+            [styles.disabled]: disabled,
+        })}
+        disabled={disabled}
+        closeOnClick={closeOnClick}
+        onClick={onClick}
+    >
+        <ItemBody
+            leadingIcon={leadingIcon}
+            trailingIcon={trailingIcon}
+            secondaryLabel={secondaryLabel}
+        >
+            {children}
+        </ItemBody>
+    </BaseMenu.Item>
+);
+
+/**
+ * A menu item that navigates. Renders a real anchor for proper semantics,
+ * keyboard and middle-click support.
+ */
+const MenuLinkItem = ({href, external, leadingIcon, trailingIcon, secondaryLabel, destructive, disabled, onClick, children}: LinkItemProps) => (
+    <BaseMenu.Item
+        className={classNames(styles.item, styles.link, {
+            [styles.destructive]: destructive,
+            [styles.disabled]: disabled,
+        })}
+        disabled={disabled}
+        onClick={onClick}
+        render={(
+            <a
+                href={href}
+                {...(external ? {target: '_blank', rel: 'noopener noreferrer'} : {})}
+            />
+        )}
+    >
+        <ItemBody
+            leadingIcon={leadingIcon}
+            trailingIcon={trailingIcon}
+            secondaryLabel={secondaryLabel}
+        >
+            {children}
+        </ItemBody>
+    </BaseMenu.Item>
+);
+
+/** A horizontal rule between groups of items. */
+const MenuSeparator = () => <BaseMenu.Separator className={styles.divider}/>;
+
+/** A nested menu opened from an item row. */
+const MenuSubmenu = ({label, leadingIcon, ariaLabel, disabled, children}: SubmenuProps) => (
+    <BaseMenu.SubmenuRoot>
+        <BaseMenu.SubmenuTrigger
+            className={classNames(styles.item, styles.submenuTrigger, {[styles.disabled]: disabled})}
+            disabled={disabled}
+        >
+            <ItemBody
+                leadingIcon={leadingIcon}
+                trailingIcon={<ChevronRightIcon size={16}/>}
+            >
+                {label}
+            </ItemBody>
+        </BaseMenu.SubmenuTrigger>
+        <BaseMenu.Portal>
+            <BaseMenu.Positioner
+                className={styles.positioner}
+                side='right'
+                align='start'
+                collisionPadding={8}
+            >
+                <BaseMenu.Popup
+                    className={styles.popover}
+                    aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}
+                >
+                    {children}
+                </BaseMenu.Popup>
+            </BaseMenu.Positioner>
+        </BaseMenu.Portal>
+    </BaseMenu.SubmenuRoot>
+);
+
+/**
+ * A dropdown menu built from `Menu.Item`, `Menu.LinkItem`, `Menu.Separator` and
+ * `Menu.Submenu` children. Portals to the body so it is never clipped by an
+ * ancestor's overflow.
+ */
+const Menu = ({ariaLabel, align = 'left', tooltip, trigger, children}: MenuProps) => (
     <BaseMenu.Root>
         {tooltip ? (
             <WithTooltip title={tooltip}>
@@ -35,41 +161,22 @@ const Menu = ({ariaLabel, items, align = 'left', tooltip, trigger}: Props) => (
                 className={styles.positioner}
                 side='bottom'
                 align={align === 'right' ? 'end' : 'start'}
-                sideOffset={4}
                 collisionPadding={8}
             >
                 <BaseMenu.Popup
                     className={styles.popover}
                     aria-label={ariaLabel}
                 >
-                    {items.map((item) => (
-                        <React.Fragment key={item.id}>
-                            {item.hasDivider && <BaseMenu.Separator className={styles.divider}/>}
-                            <BaseMenu.Item
-                                className={classNames(styles.item, {
-                                    [styles.destructive]: item.isDestructive,
-                                    [styles.link]: item.isLink || Boolean(item.href),
-                                })}
-                                onClick={item.onClick}
-                                render={item.href ? (
-                                    <a
-                                        href={item.href}
-                                        {...(item.external ? {target: '_blank', rel: 'noopener noreferrer'} : {})}
-                                    />
-                                ) : undefined}
-                            >
-                                {item.leadingIcon && <span className={styles.itemIcon}>{item.leadingIcon}</span>}
-                                <span className={styles.itemText}>
-                                    <span className={styles.itemLabel}>{item.label}</span>
-                                    {item.secondaryLabel && <span className={styles.itemSecondary}>{item.secondaryLabel}</span>}
-                                </span>
-                            </BaseMenu.Item>
-                        </React.Fragment>
-                    ))}
+                    {children}
                 </BaseMenu.Popup>
             </BaseMenu.Positioner>
         </BaseMenu.Portal>
     </BaseMenu.Root>
 );
 
+Menu.Item = MenuItem;
+Menu.LinkItem = MenuLinkItem;
+Menu.Separator = MenuSeparator;
+Menu.Submenu = MenuSubmenu;
+
 export default Menu;
diff --git a/webapp/src/components/menu/menu_types.ts b/webapp/src/components/menu/menu_types.ts
deleted file mode 100644
index 1d4f574..0000000
--- a/webapp/src/components/menu/menu_types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import type React from 'react';
-
-export type MenuItemSpec = {
-    id: string;
-    label: React.ReactNode;
-    secondaryLabel?: React.ReactNode;
-    leadingIcon?: React.ReactNode;
-    onClick?: () => void;
-    isDestructive?: boolean;
-    isLink?: boolean;
-    hasDivider?: boolean;
-
-    // When set, the item renders as a real anchor (proper semantics, keyboard
-    // and middle-click support) instead of a button. `external` opens in a new
-    // tab with a safe rel.
-    href?: string;
-    external?: boolean;
-};
diff --git a/webapp/src/components/modals/docs_modal_controller.test.tsx b/webapp/src/components/modals/docs_modal_controller.test.tsx
new file mode 100644
index 0000000..9bb99e2
--- /dev/null
+++ b/webapp/src/components/modals/docs_modal_controller.test.tsx
@@ -0,0 +1,85 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {act, screen} from '@testing-library/react';
+import React from 'react';
+
+import DocsModalController, {useDocsModal} from './docs_modal_controller';
+import {closeAllDocsModals, openDocsModal} from './modal_store';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+describe('DocsModalController', () => {
+    afterEach(() => {
+        act(() => {
+            closeAllDocsModals();
+        });
+    });
+
+    it('renders a modal opened imperatively and closes it via the handle', () => {
+        renderWithContext(<DocsModalController/>);
+
+        let handle = {id: '', close: () => {}};
+        act(() => {
+            handle = openDocsModal(<div>{'First modal'}</div>);
+        });
+
+        expect(screen.getByText('First modal')).toBeInTheDocument();
+
+        act(() => {
+            handle.close();
+        });
+
+        expect(screen.queryByText('First modal')).not.toBeInTheDocument();
+    });
+
+    it('stacks nested modals and pops only the closed one', () => {
+        renderWithContext(<DocsModalController/>);
+
+        act(() => {
+            openDocsModal(<div>{'Outer'}</div>);
+        });
+
+        let inner = {id: '', close: () => {}};
+        act(() => {
+            inner = openDocsModal(<div>{'Inner'}</div>);
+        });
+
+        expect(screen.getByText('Outer')).toBeInTheDocument();
+        expect(screen.getByText('Inner')).toBeInTheDocument();
+
+        act(() => {
+            inner.close();
+        });
+
+        expect(screen.getByText('Outer')).toBeInTheDocument();
+        expect(screen.queryByText('Inner')).not.toBeInTheDocument();
+    });
+
+    it('passes the handle to a render function and exposes it through context', () => {
+        const Content = () => {
+            const handle = useDocsModal();
+
+            return (
+                <button
+                    type='button'
+                    onClick={handle?.close}
+                >
+                    {'Close from context'}
+                </button>
+            );
+        };
+
+        renderWithContext(<DocsModalController/>);
+
+        act(() => {
+            openDocsModal(() => <Content/>);
+        });
+
+        act(() => {
+            screen.getByRole('button', {name: 'Close from context'}).click();
+        });
+
+        expect(screen.queryByRole('button', {name: 'Close from context'})).not.toBeInTheDocument();
+    });
+});
diff --git a/webapp/src/components/modals/docs_modal_controller.tsx b/webapp/src/components/modals/docs_modal_controller.tsx
new file mode 100644
index 0000000..38d951a
--- /dev/null
+++ b/webapp/src/components/modals/docs_modal_controller.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {createContext, useContext, useSyncExternalStore} from 'react';
+
+import {getDocsModalStack, subscribeToDocsModals} from './modal_store';
+import type {DocsModalEntry, DocsModalHandle} from './modal_store';
+
+const DocsModalContext = createContext<DocsModalHandle | undefined>(undefined);
+
+/** The handle of the modal the calling component is rendered inside, if any. */
+export const useDocsModal = () => useContext(DocsModalContext);
+
+type EntryProps = {
+    entry: DocsModalEntry;
+};
+
+const DocsModalEntryMount = ({entry}: EntryProps) => (
+    <DocsModalContext.Provider value={entry.handle}>
+        {entry.render(entry.handle)}
+    </DocsModalContext.Provider>
+);
+
+/**
+ * Renders the stack of modals opened through `openDocsModal`. Mount exactly
+ * once, at the Docs root.
+ */
+const DocsModalController = () => {
+    const stack = useSyncExternalStore(subscribeToDocsModals, getDocsModalStack);
+
+    return (
+        <>
+            {stack.map((entry) => (
+                <DocsModalEntryMount
+                    key={entry.handle.id}
+                    entry={entry}
+                />
+            ))}
+        </>
+    );
+};
+
+export default DocsModalController;
diff --git a/webapp/src/components/modals/index.ts b/webapp/src/components/modals/index.ts
new file mode 100644
index 0000000..1c2cab1
--- /dev/null
+++ b/webapp/src/components/modals/index.ts
@@ -0,0 +1,8 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export {default as DocsModalController, useDocsModal} from './docs_modal_controller';
+export {closeAllDocsModals, closeDocsModal, openDocsModal} from './modal_store';
+export type {DocsModalHandle, DocsModalRender} from './modal_store';
+export {useDocsModals} from './use_docs_modals';
+export type {DocsModalsApi} from './use_docs_modals';
diff --git a/webapp/src/components/modals/modal_store.ts b/webapp/src/components/modals/modal_store.ts
new file mode 100644
index 0000000..f452761
--- /dev/null
+++ b/webapp/src/components/modals/modal_store.ts
@@ -0,0 +1,70 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {ReactNode} from 'react';
+
+export type DocsModalHandle = {
+    id: string;
+    close: () => void;
+};
+
+export type DocsModalRender = (handle: DocsModalHandle) => ReactNode;
+
+export type DocsModalEntry = {
+    handle: DocsModalHandle;
+    render: DocsModalRender;
+};
+
+let stack: DocsModalEntry[] = [];
+let nextId = 0;
+
+const listeners = new Set<() => void>();
+
+const setStack = (next: DocsModalEntry[]) => {
+    stack = next;
+    listeners.forEach((listener) => listener());
+};
+
+export const subscribeToDocsModals = (listener: () => void) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+
+export const getDocsModalStack = () => stack;
+
+export const closeDocsModal = (id: string) => {
+    if (stack.some((entry) => entry.handle.id === id)) {
+        setStack(stack.filter((entry) => entry.handle.id !== id));
+    }
+};
+
+/**
+ * Opens a Docs modal from anywhere — no hook, no context, and no mount point at
+ * the callsite: `<DocsModalController/>` at the Docs root renders it. Opening from
+ * within an open modal stacks on top of it, to any depth.
+ *
+ * The content owns its own dialog surface (e.g. `GenericModal`/`ConfirmModal`,
+ * both Base UI `Dialog`-based), so nesting, focus management and backdrops are
+ * handled by Base UI's dialog stacking rather than duplicated here. Pass a
+ * render function to receive the handle (wire its `close` to the content's
+ * `onClose`), or a ready-made element when the content closes itself.
+ *
+ * @returns a handle whose `close()` pops this modal off the stack.
+ */
+export const openDocsModal = (content: ReactNode | DocsModalRender): DocsModalHandle => {
+    const id = `docs-modal-${nextId++}`;
+    const handle: DocsModalHandle = {id, close: () => closeDocsModal(id)};
+    const render: DocsModalRender = typeof content === 'function' ? content : () => content;
+
+    setStack([...stack, {handle, render}]);
+
+    return handle;
+};
+
+export const closeAllDocsModals = () => {
+    if (stack.length > 0) {
+        setStack([]);
+    }
+};
diff --git a/webapp/src/components/modals/use_docs_modals.ts b/webapp/src/components/modals/use_docs_modals.ts
new file mode 100644
index 0000000..3b852fd
--- /dev/null
+++ b/webapp/src/components/modals/use_docs_modals.ts
@@ -0,0 +1,15 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {closeAllDocsModals, closeDocsModal, openDocsModal} from './modal_store';
+
+const api = {
+    open: openDocsModal,
+    close: closeDocsModal,
+    closeAll: closeAllDocsModals,
+};
+
+export type DocsModalsApi = typeof api;
+
+/** Hook flavour of {@link openDocsModal} for components that prefer hooks. */
+export const useDocsModals = (): DocsModalsApi => api;
diff --git a/webapp/src/components/page_menu/page_menu.tsx b/webapp/src/components/page_menu/page_menu.tsx
new file mode 100644
index 0000000..61b7d06
--- /dev/null
+++ b/webapp/src/components/page_menu/page_menu.tsx
@@ -0,0 +1,231 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useIsFavorite, useToggleFavorite} from 'hooks/favorites';
+import {useDocsNavigation} from 'hooks/navigation';
+import {useAppDispatch} from 'hooks/redux';
+import React, {useCallback} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {copyToClipboard} from 'utils/clipboard';
+
+import AccountMultipleOutlineIcon from '@mattermost/compass-icons/components/account-multiple-outline';
+import BellOutlineIcon from '@mattermost/compass-icons/components/bell-outline';
+import ClockOutlineIcon from '@mattermost/compass-icons/components/clock-outline';
+import ContentCopyIcon from '@mattermost/compass-icons/components/content-copy';
+import DockWindowIcon from '@mattermost/compass-icons/components/dock-window';
+import ExportVariantIcon from '@mattermost/compass-icons/components/export-variant';
+import FolderMoveOutlineIcon from '@mattermost/compass-icons/components/folder-move-outline';
+import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
+import PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';
+import StarIcon from '@mattermost/compass-icons/components/star';
+import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
+import TrashCanOutlineIcon from '@mattermost/compass-icons/components/trash-can-outline';
+
+import {updatePage} from 'store/actions';
+
+import BasicInputModal from 'components/basic_input_modal/basic_input_modal';
+import DeletePageModal from 'components/delete_page_modal/delete_page_modal';
+import Menu from 'components/menu/menu';
+import {openDocsModal} from 'components/modals';
+
+// Mirrors the server's PageTitleMaxRunes (server/model/page.go).
+const PAGE_TITLE_MAX_LENGTH = 255;
+
+type Props = {
+    spaceId: string;
+    pageId: string;
+    pageTitle: string;
+
+    // Base UI merges its own open/aria/ref props onto the trigger element.
+    trigger: React.ReactElement;
+    align?: 'left' | 'right';
+    tooltip?: string;
+};
+
+/**
+ * The page actions menu, shared by the page tree rows and the page header.
+ * Items without a handler are scaffolding for features that have no API yet.
+ */
+const PageMenu = ({spaceId, pageId, pageTitle, trigger, align = 'left', tooltip}: Props) => {
+    const {formatMessage} = useIntl();
+    const {paths} = useDocsNavigation();
+    const dispatch = useAppDispatch();
+    const favorited = useIsFavorite('page', pageId);
+    const toggleFavorite = useToggleFavorite();
+
+    const pageUrl = `${window.location.origin}${paths.page(spaceId, pageId)}`;
+
+    const copyLink = useCallback(() => copyToClipboard(pageUrl), [pageUrl]);
+    const openInNewWindow = useCallback(() => window.open(pageUrl, '_blank', 'noopener,noreferrer'), [pageUrl]);
+
+    const openRename = useCallback(() => {
+        openDocsModal((modal) => (
+            <BasicInputModal
+                title={formatMessage({id: 'docs.renamePage.title', defaultMessage: 'Rename page'})}
+                label={formatMessage({id: 'docs.renamePage.label', defaultMessage: 'Page name'})}
+                initialValue={pageTitle}
+                confirmButtonText={formatMessage({id: 'docs.renamePage.confirm', defaultMessage: 'Save'})}
+                maxLength={PAGE_TITLE_MAX_LENGTH}
+                onConfirm={async (title) => {
+                    await dispatch(updatePage(spaceId, pageId, {title}));
+                }}
+                onClose={modal.close}
+            />
+        ));
+    }, [dispatch, formatMessage, pageId, pageTitle, spaceId]);
+
+    const openDeleteConfirm = useCallback(() => {
+        openDocsModal((modal) => (
+            <DeletePageModal
+                spaceId={spaceId}
+                pageId={pageId}
+                pageTitle={pageTitle}
+                onClose={modal.close}
+            />
+        ));
+    }, [pageId, pageTitle, spaceId]);
+
+    return (
+        <Menu
+            ariaLabel={formatMessage({id: 'docs.pageMenu.label', defaultMessage: 'Page options for {title}'}, {title: pageTitle})}
+            align={align}
+            tooltip={tooltip}
+            trigger={trigger}
+        >
+            <Menu.Item
+                leadingIcon={favorited ? <StarIcon size={18}/> : <StarOutlineIcon size={18}/>}
+                onClick={() => toggleFavorite('page', pageId)}
+            >
+                {favorited ? (
+                    <FormattedMessage
+                        id='docs.pageMenu.unfavorite'
+                        defaultMessage='Remove from favorites'
+                    />
+                ) : (
+                    <FormattedMessage
+                        id='docs.pageMenu.favorite'
+                        defaultMessage='Favorite'
+                    />
+                )}
+            </Menu.Item>
+            <Menu.Item
+                leadingIcon={<PencilOutlineIcon size={18}/>}
+                onClick={openRename}
+            >
+                <FormattedMessage
+                    id='docs.pageMenu.rename'
+                    defaultMessage='Rename'
+                />
+            </Menu.Item>
+            <Menu.Item
+                leadingIcon={<LinkVariantIcon size={18}/>}
+                onClick={copyLink}
+            >
+                <FormattedMessage
+                    id='docs.pageMenu.copyLink'
+                    defaultMessage='Copy link'
+                />
+            </Menu.Item>
+
+            <Menu.Separator/>
+
+            <Menu.Item leadingIcon={<AccountMultipleOutlineIcon size={18}/>}>
+                <FormattedMessage
+                    id='docs.pageMenu.sharing'
+                    defaultMessage='Sharing and Permissions'
+                />
+            </Menu.Item>
+            <Menu.Submenu
+                leadingIcon={<BellOutlineIcon size={18}/>}
+                label={formatMessage({id: 'docs.pageMenu.notifications', defaultMessage: 'Notifications'})}
+            >
+                <Menu.Item>
+                    <FormattedMessage
+                        id='docs.pageMenu.notifications.all'
+                        defaultMessage='All activity'
+                    />
+                </Menu.Item>
+                <Menu.Item>
+                    <FormattedMessage
+                        id='docs.pageMenu.notifications.mentions'
+                        defaultMessage='Mentions'
+                    />
+                </Menu.Item>
+                <Menu.Item>
+                    <FormattedMessage
+                        id='docs.pageMenu.notifications.none'
+                        defaultMessage='Nothing'
+                    />
+                </Menu.Item>
+            </Menu.Submenu>
+            <Menu.Item leadingIcon={<ClockOutlineIcon size={18}/>}>
+                <FormattedMessage
+                    id='docs.pageMenu.versionHistory'
+                    defaultMessage='Version history'
+                />
+            </Menu.Item>
+
+            <Menu.Separator/>
+
+            <Menu.Item leadingIcon={<ContentCopyIcon size={18}/>}>
+                <FormattedMessage
+                    id='docs.pageMenu.duplicate'
+                    defaultMessage='Duplicate page'
+                />
+            </Menu.Item>
+            <Menu.Submenu
+                leadingIcon={<FolderMoveOutlineIcon size={18}/>}
+                label={formatMessage({id: 'docs.pageMenu.moveTo', defaultMessage: 'Move to'})}
+            >
+                <Menu.Item disabled={true}>
+                    <FormattedMessage
+                        id='docs.pageMenu.comingSoon'
+                        defaultMessage='Coming soon'
+                    />
+                </Menu.Item>
+            </Menu.Submenu>
+            <Menu.Submenu
+                leadingIcon={<ExportVariantIcon size={18}/>}
+                label={formatMessage({id: 'docs.pageMenu.export', defaultMessage: 'Export'})}
+            >
+                <Menu.Item>
+                    <FormattedMessage
+                        id='docs.pageMenu.export.pdf'
+                        defaultMessage='PDF'
+                    />
+                </Menu.Item>
+                <Menu.Item>
+                    <FormattedMessage
+                        id='docs.pageMenu.export.markdown'
+                        defaultMessage='Markdown'
+                    />
+                </Menu.Item>
+            </Menu.Submenu>
+
+            <Menu.Item
+                leadingIcon={<TrashCanOutlineIcon size={18}/>}
+                destructive={true}
+                onClick={openDeleteConfirm}
+            >
+                <FormattedMessage
+                    id='docs.pageMenu.delete'
+                    defaultMessage='Delete page'
+                />
+            </Menu.Item>
+
+            <Menu.Separator/>
+
+            <Menu.Item
+                leadingIcon={<DockWindowIcon size={18}/>}
+                onClick={openInNewWindow}
+            >
+                <FormattedMessage
+                    id='docs.pageMenu.openInNewWindow'
+                    defaultMessage='Open in new window'
+                />
+            </Menu.Item>
+        </Menu>
+    );
+};
+
+export default PageMenu;
diff --git a/webapp/src/components/resizable_divider/resizable_divider.module.scss b/webapp/src/components/resizable_divider/resizable_divider.module.scss
new file mode 100644
index 0000000..979578c
--- /dev/null
+++ b/webapp/src/components/resizable_divider/resizable_divider.module.scss
@@ -0,0 +1,62 @@
+// A 12px grab area centered on the container's edge, so the pointer target is
+// forgiving while the visible line stays 4px (matching core).
+.divider {
+    position: absolute;
+    z-index: 5;
+    top: 0;
+    width: 12px;
+    height: 100%;
+    cursor: col-resize;
+
+    &::after {
+        position: absolute;
+        top: 0;
+        width: 4px;
+        height: 100%;
+        background: transparent;
+        content: '';
+    }
+
+    &:hover::after,
+    &:focus-visible::after {
+        background: var(--sidebar-text-active-border);
+    }
+
+    &:focus-visible {
+        outline: none;
+    }
+}
+
+.active::after {
+    background: var(--sidebar-text-active-border);
+}
+
+// Emphasized while the drag is snapped to the default width, so the snap is
+// visible rather than just felt.
+.snapped::after {
+    width: 6px;
+    background: var(--button-bg);
+}
+
+// `left`/`right` name the edge the handle sits on, so the line hugs the border.
+.left {
+    right: -6px;
+
+    &::after {
+        left: 4px;
+    }
+}
+
+.right {
+    left: -6px;
+
+    &::after {
+        right: 4px;
+    }
+}
+
+// Set on <body> for the duration of a drag.
+.resizing {
+    cursor: col-resize;
+    user-select: none;
+}
diff --git a/webapp/src/components/resizable_divider/resizable_divider.tsx b/webapp/src/components/resizable_divider/resizable_divider.tsx
new file mode 100644
index 0000000..faacb21
--- /dev/null
+++ b/webapp/src/components/resizable_divider/resizable_divider.tsx
@@ -0,0 +1,148 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React, {useEffect, useRef, useState} from 'react';
+
+import styles from './resizable_divider.module.scss';
+
+// Matches core's resizable sidebars (components/resizable_sidebar): a wide
+// invisible grab area straddling the edge, with a thin accent line on hover and
+// while dragging. Core builds this with styled-components, which the Docs plugin
+// can't use, so the same behaviour is reimplemented over CSS Modules.
+
+export type ResizeSide = 'left' | 'right';
+
+type Props = {
+    ariaLabel: string;
+
+    /** Which edge of the resized container the handle sits on. */
+    side: ResizeSide;
+    width: number;
+    minWidth: number;
+    maxWidth: number;
+    defaultWidth: number;
+
+    /** Fires continuously while dragging; keep this cheap (state only). */
+    onResize: (width: number) => void;
+
+    /** Fires once when the drag ends — the place to persist the result. */
+    onResizeEnd: (width: number) => void;
+};
+
+// Keyboard resizing steps by this many pixels per arrow press.
+const KEYBOARD_STEP = 16;
+
+// Dragging within this distance of the default width snaps to it, so the default
+// is easy to land on by feel (core's sidebars do the same).
+const SNAP_DISTANCE = 10;
+
+const ResizableDivider = ({ariaLabel, side, width, minWidth, maxWidth, defaultWidth, onResize, onResizeEnd}: Props) => {
+    const [dragging, setDragging] = useState(false);
+    const [snapped, setSnapped] = useState(false);
+    const startX = useRef(0);
+    const startWidth = useRef(0);
+
+    const clamp = (value: number) => Math.min(maxWidth, Math.max(minWidth, Math.round(value)));
+
+    // Snapping is applied to the pointer's raw width so it can't compound: the
+    // snap zone stays anchored to the default rather than following the result.
+    const snap = (value: number) => (Math.abs(value - defaultWidth) <= SNAP_DISTANCE ? defaultWidth : value);
+
+    // Dragging over the document needs a body-level cursor and no text
+    // selection, otherwise the pointer flickers over the content it crosses.
+    useEffect(() => {
+        if (!dragging) {
+            return undefined;
+        }
+        document.body.classList.add(styles.resizing);
+        return () => document.body.classList.remove(styles.resizing);
+    }, [dragging]);
+
+    const widthFor = (clientX: number) => {
+        const delta = side === 'left' ? clientX - startX.current : startX.current - clientX;
+        return clamp(snap(startWidth.current + delta));
+    };
+
+    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        startX.current = event.clientX;
+        startWidth.current = width;
+        setDragging(true);
+        event.currentTarget.setPointerCapture(event.pointerId);
+    };
+
+    const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+        if (!dragging) {
+            return;
+        }
+        const next = widthFor(event.clientX);
+        setSnapped(next === defaultWidth);
+        onResize(next);
+    };
+
+    const endDrag = (event: React.PointerEvent<HTMLDivElement>) => {
+        if (!dragging) {
+            return;
+        }
+        setDragging(false);
+        setSnapped(false);
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        onResizeEnd(widthFor(event.clientX));
+    };
+
+    // Double-click restores the default width, as core's divider does.
+    const onDoubleClick = () => {
+        onResize(defaultWidth);
+        onResizeEnd(defaultWidth);
+    };
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const grow = side === 'left' ? 'ArrowRight' : 'ArrowLeft';
+        const shrink = side === 'left' ? 'ArrowLeft' : 'ArrowRight';
+
+        let next: number | undefined;
+        if (event.key === grow) {
+            next = clamp(width + KEYBOARD_STEP);
+        } else if (event.key === shrink) {
+            next = clamp(width - KEYBOARD_STEP);
+        } else if (event.key === 'Home') {
+            next = defaultWidth;
+        }
+
+        if (next !== undefined) {
+            event.preventDefault();
+            onResize(next);
+            onResizeEnd(next);
+        }
+    };
+
+    return (
+        <div
+            className={classNames(styles.divider, styles[side], {
+                [styles.active]: dragging,
+                [styles.snapped]: dragging && snapped,
+            })}
+            role='separator'
+            tabIndex={0}
+            aria-label={ariaLabel}
+            aria-orientation='vertical'
+            aria-valuenow={width}
+            aria-valuemin={minWidth}
+            aria-valuemax={maxWidth}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+            onDoubleClick={onDoubleClick}
+            onKeyDown={onKeyDown}
+        />
+    );
+};
+
+export default ResizableDivider;
diff --git a/webapp/src/components/save_changes_bar/save_changes_bar.module.scss b/webapp/src/components/save_changes_bar/save_changes_bar.module.scss
new file mode 100644
index 0000000..aeddebd
--- /dev/null
+++ b/webapp/src/components/save_changes_bar/save_changes_bar.module.scss
@@ -0,0 +1,46 @@
+.bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 12px 12px 12px 16px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: var(--center-channel-bg);
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+}
+
+.error {
+    border-color: rgba(var(--error-text-color-rgb), 0.5);
+}
+
+.message {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 8px;
+    color: var(--center-channel-color);
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+}
+
+.error .message,
+.error .icon {
+    color: var(--error-text);
+}
+
+.actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+}
diff --git a/webapp/src/components/save_changes_bar/save_changes_bar.tsx b/webapp/src/components/save_changes_bar/save_changes_bar.tsx
new file mode 100644
index 0000000..143767b
--- /dev/null
+++ b/webapp/src/components/save_changes_bar/save_changes_bar.tsx
@@ -0,0 +1,94 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';
+import InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';
+
+import {PrimaryButton, TertiaryButton} from 'components/form_controls/button';
+
+import styles from './save_changes_bar.module.scss';
+
+export type SaveChangesBarState = 'editing' | 'error';
+
+type Props = {
+    state?: SaveChangesBarState;
+
+    /** Overrides the default "You have unsaved changes" prompt. */
+    message?: React.ReactNode;
+
+    /** Shown in place of the prompt when `state` is `error`. */
+    errorMessage?: React.ReactNode;
+    saving?: boolean;
+    saveText?: React.ReactNode;
+    resetText?: React.ReactNode;
+    onSave: () => void;
+    onReset: () => void;
+};
+
+/**
+ * Floating "unsaved changes" bar with Save/Reset actions, modeled on the host's
+ * channel-settings SaveChangesPanel. The consumer positions it (e.g. absolutely
+ * at the bottom of a modal) and renders it only while there are changes.
+ */
+const SaveChangesBar = ({state = 'editing', message, errorMessage, saving = false, saveText, resetText, onSave, onReset}: Props) => {
+    const isError = state === 'error';
+
+    return (
+        <div
+            className={classNames(styles.bar, {[styles.error]: isError})}
+            role='status'
+        >
+            <span className={styles.message}>
+                <span
+                    className={styles.icon}
+                    aria-hidden={true}
+                >
+                    {isError ? <AlertCircleOutlineIcon size={18}/> : <InformationOutlineIcon size={18}/>}
+                </span>
+                {isError ? (errorMessage ?? (
+                    <FormattedMessage
+                        id='docs.saveChanges.error'
+                        defaultMessage='There was an error saving your changes'
+                    />
+                )) : (message ?? (
+                    <FormattedMessage
+                        id='docs.saveChanges.message'
+                        defaultMessage='You have unsaved changes'
+                    />
+                ))}
+            </span>
+            <span className={styles.actions}>
+                <TertiaryButton
+                    size='sm'
+                    disabled={saving}
+                    onClick={onReset}
+                >
+                    {resetText ?? (
+                        <FormattedMessage
+                            id='docs.saveChanges.reset'
+                            defaultMessage='Reset'
+                        />
+                    )}
+                </TertiaryButton>
+                <PrimaryButton
+                    size='sm'
+                    disabled={saving}
+                    onClick={onSave}
+                >
+                    {saveText ?? (
+                        <FormattedMessage
+                            id='docs.saveChanges.save'
+                            defaultMessage='Save'
+                        />
+                    )}
+                </PrimaryButton>
+            </span>
+        </div>
+    );
+};
+
+export default SaveChangesBar;
diff --git a/webapp/src/components/share_space_modal/people_picker.module.scss b/webapp/src/components/share_space_modal/people_picker.module.scss
index 0a6ce64..cf04638 100644
--- a/webapp/src/components/share_space_modal/people_picker.module.scss
+++ b/webapp/src/components/share_space_modal/people_picker.module.scss
@@ -1,34 +1,88 @@
 .control {
-    position: relative;
     display: flex;
+    box-sizing: border-box;
+    min-height: 40px;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    padding: 5px 11px;
     border-radius: 4px;
     background: var(--center-channel-bg);
+    cursor: text;
+    gap: 6px;
+
+    // Inset ring rather than a border so widening it on focus doesn't reflow the row.
+    box-shadow: inset 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.16);
 
     &:focus-within {
-        padding: 11px 15px;
-        border: 2px solid var(--button-bg);
+        box-shadow: inset 0 0 0 2px var(--button-bg);
     }
 }
 
 .searchIcon {
-    flex-shrink: 0;
+    flex: 0 0 auto;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.chip {
+    display: flex;
+    max-width: 100%;
+    align-items: center;
+    padding: 2px 4px 2px 2px;
+    border-radius: 12px;
+    background: rgba(var(--center-channel-color-rgb), 0.08);
+    color: var(--center-channel-color);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    gap: 4px;
+
+    &:focus-visible {
+        outline: 2px solid var(--button-bg);
+        outline-offset: 1px;
+    }
+}
+
+.chipName {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chipRemove {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
     color: rgba(var(--center-channel-color-rgb), 0.64);
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.16);
+        color: var(--center-channel-color);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--button-bg);
+        outline-offset: 1px;
+    }
 }
 
 .input {
-    flex: 1 1 auto;
-    min-width: 0;
+    min-width: 120px;
+    flex: 1 1 120px;
     padding: 0;
     border: none;
     background: transparent;
     color: var(--center-channel-color);
     font-family: 'Open Sans', sans-serif;
     font-size: 14px;
-    line-height: 20px;
+    line-height: 24px;
 
     &:focus {
         outline: none;
@@ -45,8 +99,9 @@
 }
 
 .popup {
+    box-sizing: border-box;
     max-height: min(320px, var(--available-height));
-    padding: 8px 0;
+    padding: 6px 0;
     overflow-y: auto;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
     border-radius: 4px;
@@ -69,23 +124,45 @@
     }
 }
 
+.list {
+    display: flex;
+    flex-direction: column;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+// The row itself is the click target: full width, padding on the row (not on an
+// inner wrapper) so every pixel of it selects the person.
 .item {
     display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 40px;
     align-items: center;
-    gap: 12px;
     padding: 6px 16px;
     color: var(--center-channel-color);
     font-family: 'Open Sans', sans-serif;
     font-size: 14px;
     line-height: 20px;
     cursor: pointer;
+    gap: 12px;
     user-select: none;
 
+    > :global(.Avatar) {
+        flex: 0 0 auto;
+    }
+
     &:hover,
     &[data-highlighted] {
         background: rgba(var(--center-channel-color-rgb), 0.08);
         outline: none;
     }
+
+    &:active {
+        background: rgba(var(--center-channel-color-rgb), 0.16);
+    }
 }
 
 .itemInfo {
diff --git a/webapp/src/components/share_space_modal/people_picker.test.tsx b/webapp/src/components/share_space_modal/people_picker.test.tsx
new file mode 100644
index 0000000..f69a926
--- /dev/null
+++ b/webapp/src/components/share_space_modal/people_picker.test.tsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import type {MemberProfile} from 'hooks/members';
+import {useUserSearch} from 'hooks/user_search';
+import React from 'react';
+
+import PeoplePicker from './people_picker';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+jest.mock('hooks/user_search', () => ({
+    useUserSearch: jest.fn(),
+}));
+
+const mockUseUserSearch = useUserSearch as jest.MockedFunction<typeof useUserSearch>;
+
+const alice: MemberProfile = {id: 'user-a', displayName: 'Alice Adams', username: 'alice', avatarUrl: '/a.png'};
+const bob: MemberProfile = {id: 'user-b', displayName: 'Bob Barker', username: 'bob', avatarUrl: '/b.png'};
+
+const baseProps = {
+    selected: [],
+    excludeIds: [],
+    onChange: jest.fn(),
+};
+
+describe('PeoplePicker', () => {
+    beforeEach(() => {
+        mockUseUserSearch.mockReturnValue({results: [alice, bob], loading: false});
+    });
+
+    it('selects a person when the row is clicked', async () => {
+        const onChange = jest.fn();
+        renderWithContext(
+            <PeoplePicker
+                {...baseProps}
+                onChange={onChange}
+            />,
+        );
+
+        fireEvent.change(screen.getByRole('combobox'), {target: {value: 'a'}});
+
+        const row = await screen.findByRole('option', {name: /Alice Adams/});
+        fireEvent.click(row);
+
+        expect(onChange.mock.calls[0][0]).toEqual([alice]);
+    });
+
+    it('renders a chip per selected person rather than a serialized profile', () => {
+        renderWithContext(
+            <PeoplePicker
+                {...baseProps}
+                selected={[alice]}
+            />,
+        );
+
+        expect(screen.getByText('Alice Adams')).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Remove Alice Adams'})).toBeInTheDocument();
+
+        const input = screen.getByRole('combobox') as HTMLInputElement;
+        expect(input.value).toBe('');
+        expect(screen.queryByText(/"id"/)).not.toBeInTheDocument();
+    });
+
+    it('removes a person via the chip remove button', async () => {
+        const onChange = jest.fn();
+        renderWithContext(
+            <PeoplePicker
+                {...baseProps}
+                selected={[alice, bob]}
+                onChange={onChange}
+            />,
+        );
+
+        fireEvent.click(screen.getByRole('button', {name: 'Remove Alice Adams'}));
+
+        await waitFor(() => expect(onChange.mock.calls[0][0]).toEqual([bob]));
+    });
+});
diff --git a/webapp/src/components/share_space_modal/people_picker.tsx b/webapp/src/components/share_space_modal/people_picker.tsx
index 421a94c..8d1d8f9 100644
--- a/webapp/src/components/share_space_modal/people_picker.tsx
+++ b/webapp/src/components/share_space_modal/people_picker.tsx
@@ -1,62 +1,96 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {Autocomplete} from '@base-ui-components/react/autocomplete';
+import {Combobox} from '@base-ui-components/react/combobox';
 import type {MemberProfile} from 'hooks/members';
 import {useUserSearch} from 'hooks/user_search';
 import React, {useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {Avatar} from 'webapp_globals';
 
+import CloseIcon from '@mattermost/compass-icons/components/close';
 import MagnifyIcon from '@mattermost/compass-icons/components/magnify';
 
 import styles from './people_picker.module.scss';
 
 type Props = {
+    selected: MemberProfile[];
     excludeIds: string[];
-    onSelect: (user: MemberProfile) => void;
+    onChange: (users: MemberProfile[]) => void;
 };
 
-// Searchable people combobox for the share modal. Built on Base UI's Autocomplete
-// (mode='none' so the list is driven by the server search, not client filtering).
-// Picking a result fires onSelect and clears the query.
-const PeoplePicker = ({excludeIds, onSelect}: Props) => {
+const itemToLabel = (user: MemberProfile) => user.displayName;
+const sameUser = (a: MemberProfile, b: MemberProfile) => a.id === b.id;
+
+// Multi-select people picker for the share modal: chips for who's been picked,
+// plus a server-driven suggestion list.
+//
+// Base UI's Combobox (not Autocomplete) is the right primitive here — it owns the
+// selected values and ships the Chips/Chip/ChipRemove parts. `filter={null}`
+// disables client-side filtering because `useUserSearch` already queries the
+// server, and `itemToStringLabel` keeps Base UI from serialising a profile object
+// when it needs a string for an item.
+const PeoplePicker = ({selected, excludeIds, onChange}: Props) => {
     const {formatMessage} = useIntl();
     const [query, setQuery] = useState('');
     const {results, loading} = useUserSearch(query, excludeIds);
 
     const placeholder = formatMessage({id: 'docs.share.search', defaultMessage: 'Add people or groups'});
 
-    const pick = (user: MemberProfile) => {
-        onSelect(user);
-        setQuery('');
-    };
-
     return (
-        <Autocomplete.Root
+        <Combobox.Root<MemberProfile, true>
+            multiple={true}
             items={results}
-            mode='none'
-            value={query}
-            onValueChange={setQuery}
+            filter={null}
+            value={selected}
+            onValueChange={onChange}
+            inputValue={query}
+            onInputValueChange={setQuery}
+            itemToStringLabel={itemToLabel}
+            isItemEqualToValue={sameUser}
+            openOnInputClick={false}
         >
-            <div className={styles.control}>
+            <Combobox.Chips className={styles.control}>
                 <MagnifyIcon
                     className={styles.searchIcon}
                     size={16}
                 />
-                <Autocomplete.Input
+                {selected.map((user) => (
+                    <Combobox.Chip
+                        key={user.id}
+                        className={styles.chip}
+                    >
+                        <Avatar
+                            url={user.avatarUrl}
+                            username={user.username}
+                            size='xs'
+                            name=''
+                        />
+                        <span className={styles.chipName}>{user.displayName}</span>
+                        <Combobox.ChipRemove
+                            className={styles.chipRemove}
+                            aria-label={formatMessage(
+                                {id: 'docs.share.remove', defaultMessage: 'Remove {name}'},
+                                {name: user.displayName},
+                            )}
+                        >
+                            <CloseIcon size={12}/>
+                        </Combobox.ChipRemove>
+                    </Combobox.Chip>
+                ))}
+                <Combobox.Input
                     className={styles.input}
-                    placeholder={placeholder}
+                    placeholder={selected.length === 0 ? placeholder : undefined}
                     aria-label={placeholder}
                 />
-            </div>
-            <Autocomplete.Portal>
-                <Autocomplete.Positioner
+            </Combobox.Chips>
+            <Combobox.Portal>
+                <Combobox.Positioner
                     className={styles.positioner}
                     sideOffset={4}
                 >
-                    <Autocomplete.Popup className={styles.popup}>
-                        <Autocomplete.Empty className={styles.empty}>
+                    <Combobox.Popup className={styles.popup}>
+                        <Combobox.Empty className={styles.empty}>
                             {loading ? (
                                 <FormattedMessage
                                     id='docs.share.searching'
@@ -68,14 +102,13 @@ const PeoplePicker = ({excludeIds, onSelect}: Props) => {
                                     defaultMessage='No people found'
                                 />
                             )}
-                        </Autocomplete.Empty>
-                        <Autocomplete.List>
+                        </Combobox.Empty>
+                        <Combobox.List className={styles.list}>
                             {(user: MemberProfile) => (
-                                <Autocomplete.Item
+                                <Combobox.Item
                                     key={user.id}
                                     value={user}
                                     className={styles.item}
-                                    onClick={() => pick(user)}
                                 >
                                     <Avatar
                                         url={user.avatarUrl}
@@ -95,13 +128,13 @@ const PeoplePicker = ({excludeIds, onSelect}: Props) => {
                                             </span>
                                         )}
                                     </span>
-                                </Autocomplete.Item>
+                                </Combobox.Item>
                             )}
-                        </Autocomplete.List>
-                    </Autocomplete.Popup>
-                </Autocomplete.Positioner>
-            </Autocomplete.Portal>
-        </Autocomplete.Root>
+                        </Combobox.List>
+                    </Combobox.Popup>
+                </Combobox.Positioner>
+            </Combobox.Portal>
+        </Combobox.Root>
     );
 };
 
diff --git a/webapp/src/components/share_space_modal/share_space_modal.module.scss b/webapp/src/components/share_space_modal/share_space_modal.module.scss
index 9c68e48..dc527a7 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.module.scss
+++ b/webapp/src/components/share_space_modal/share_space_modal.module.scss
@@ -3,14 +3,6 @@
     max-width: calc(100vw - 32px);
 }
 
-.titleBar {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-}
-
 .copyLink {
     gap: 6px;
 }
@@ -18,7 +10,7 @@
 .body {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 16px;
     padding: 20px 24px 8px;
 }
 
@@ -29,6 +21,7 @@
 
 .memberRow {
     display: flex;
+    min-height: 48px;
     align-items: center;
     gap: 12px;
     padding: 8px 0;
diff --git a/webapp/src/components/share_space_modal/share_space_modal.tsx b/webapp/src/components/share_space_modal/share_space_modal.tsx
index 9a4dde2..10d3412 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.tsx
+++ b/webapp/src/components/share_space_modal/share_space_modal.tsx
@@ -47,36 +47,36 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
     const {canManageMembers} = useSpacePermissions(space.id);
 
     // People chosen from the search picker. There's no add-member API yet
-    // (roles/view-access land with PR #10), so these are held client-side and
-    // shown alongside the real members until the server can persist them.
-    const [added, setAdded] = useState<MemberProfile[]>([]);
+    // (roles/view-access land with PR #10), so they stay as pending chips in the
+    // picker rather than joining the member list.
+    const [pending, setPending] = useState<MemberProfile[]>([]);
 
-    const displayedMembers = useMemo(() => [...members, ...added], [members, added]);
-    const excludeIds = useMemo(() => displayedMembers.map((member) => member.id), [displayedMembers]);
-
-    const addPerson = (user: MemberProfile) => setAdded((prev) => [...prev, user]);
+    const excludeIds = useMemo(
+        () => [...members.map((member) => member.id), ...pending.map((user) => user.id)],
+        [members, pending],
+    );
 
     const copyLink = () => copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
 
     const title = (
-        <span className={styles.titleBar}>
+        <FormattedMessage
+            id='docs.share.title'
+            defaultMessage='Share space'
+        />
+    );
+
+    const titleActions = (
+        <SecondaryButton
+            size='sm'
+            className={styles.copyLink}
+            onClick={copyLink}
+        >
+            <ContentCopyIcon size={16}/>
             <FormattedMessage
-                id='docs.share.title'
-                defaultMessage='Share space'
+                id='docs.share.copyLink'
+                defaultMessage='Copy link'
             />
-            <SecondaryButton
-                type='button'
-                size='sm'
-                className={styles.copyLink}
-                onClick={copyLink}
-            >
-                <ContentCopyIcon size={16}/>
-                <FormattedMessage
-                    id='docs.share.copyLink'
-                    defaultMessage='Copy link'
-                />
-            </SecondaryButton>
-        </span>
+        </SecondaryButton>
     );
 
     const footer = (
@@ -121,6 +121,7 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
         <GenericModal
             className={styles.modal}
             title={title}
+            titleActions={titleActions}
             ariaLabel={formatMessage({id: 'docs.share.title', defaultMessage: 'Share space'})}
             onClose={onClose}
             footer={footer}
@@ -128,12 +129,13 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
             <div className={styles.body}>
                 {canManageMembers && (
                     <PeoplePicker
+                        selected={pending}
                         excludeIds={excludeIds}
-                        onSelect={addPerson}
+                        onChange={setPending}
                     />
                 )}
                 <div className={styles.memberList}>
-                    {displayedMembers.map((member) => (
+                    {members.map((member) => (
                         <div
                             key={member.id}
                             className={styles.memberRow}
diff --git a/webapp/src/components/space_info/space_info_members.tsx b/webapp/src/components/space_info/space_info_members.tsx
new file mode 100644
index 0000000..0c6c5c1
--- /dev/null
+++ b/webapp/src/components/space_info/space_info_members.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {MemberProfile} from 'hooks/members';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Avatar} from 'webapp_globals';
+
+import styles from './space_info_panel.module.scss';
+
+type Props = {
+    members: MemberProfile[];
+};
+
+/**
+ * The panel's members view, reached from the info menu. Mirrors core's channel
+ * members RHS: the roster on its own screen rather than inline on the root.
+ */
+const SpaceInfoMembers = ({members}: Props) => (
+    <div className={styles.memberList}>
+        {members.map((member) => (
+            <div
+                key={member.id}
+                className={styles.memberRow}
+            >
+                <Avatar
+                    url={member.avatarUrl}
+                    username={member.username}
+                    size='sm'
+                    name=''
+                />
+                <span className={styles.memberInfo}>
+                    <span className={styles.memberName}>{member.displayName}</span>
+                    {member.username && (
+                        <span className={styles.memberUsername}>
+                            <FormattedMessage
+                                id='docs.spaceInfo.handle'
+                                defaultMessage='@{username}'
+                                values={{username: member.username}}
+                            />
+                        </span>
+                    )}
+                </span>
+            </div>
+        ))}
+    </div>
+);
+
+export default SpaceInfoMembers;
diff --git a/webapp/src/components/space_info/space_info_menu.module.scss b/webapp/src/components/space_info/space_info_menu.module.scss
new file mode 100644
index 0000000..5086a22
--- /dev/null
+++ b/webapp/src/components/space_info/space_info_menu.module.scss
@@ -0,0 +1,57 @@
+// Mirrors core's channel_info_rhs menu: a flush vertical list of 40px rows that
+// bleed to the panel's edges, so it reads as a menu rather than a card.
+.menu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-inline: -16px;
+    padding: 8px 0;
+
+    // Core's global `.btn + .btn { margin-left: 8px }` keys off DOM adjacency and
+    // would indent every row after the first; this is a vertical list.
+    :global(.btn + .btn) {
+        margin-left: 0;
+    }
+}
+
+// Scoped under `.btn.btn-sm` to beat core's quaternary color and padding.
+.item:global(.btn.btn-sm) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    padding: 8px 16px;
+    border-radius: 0;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: left;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}
+
+.icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+.text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    padding-inline-start: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.badge {
+    flex-shrink: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
+    line-height: 18px;
+}
diff --git a/webapp/src/components/space_info/space_info_menu.tsx b/webapp/src/components/space_info/space_info_menu.tsx
new file mode 100644
index 0000000..d924c3c
--- /dev/null
+++ b/webapp/src/components/space_info/space_info_menu.tsx
@@ -0,0 +1,120 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useDocsNavigation} from 'hooks/navigation';
+import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+import {copyToClipboard} from 'utils/clipboard';
+
+import AccountMultipleOutlineIcon from '@mattermost/compass-icons/components/account-multiple-outline';
+import ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';
+import CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';
+import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
+
+import {useSpacePermissions} from 'store/permissions';
+
+import {Button} from 'components/form_controls/button';
+import {openDocsModal} from 'components/modals';
+import SpaceSettingsModal from 'components/space_settings_modal/space_settings_modal';
+
+import type {Space} from 'types/docs';
+
+import styles from './space_info_menu.module.scss';
+
+type ItemProps = {
+    icon: React.ReactNode;
+    text: string;
+
+    /** Trailing count, as core shows member/file counts. */
+    badge?: React.ReactNode;
+
+    /** Marks the item as drilling into a sub-panel, adding a chevron. */
+    opensPanel?: boolean;
+    onClick: () => void;
+};
+
+const SpaceInfoMenuItem = ({icon, text, badge, opensPanel, onClick}: ItemProps) => (
+    <Button
+        emphasis='quaternary'
+        size='sm'
+        className={styles.item}
+        onClick={onClick}
+    >
+        <span
+            className={styles.icon}
+            aria-hidden={true}
+        >
+            {icon}
+        </span>
+        <span className={styles.text}>{text}</span>
+        {badge !== undefined && <span className={styles.badge}>{badge}</span>}
+        {opensPanel && (
+            <span
+                className={styles.icon}
+                aria-hidden={true}
+            >
+                <ChevronRightIcon size={16}/>
+            </span>
+        )}
+    </Button>
+);
+
+type Props = {
+    space: Space;
+    memberCount: number;
+
+    /** Drills the panel into its members view. */
+    onShowMembers: () => void;
+};
+
+/**
+ * The space info action list, mirroring core's channel_info_rhs menu: a vertical
+ * nav of full-width rows with a leading icon and an optional trailing count.
+ */
+const SpaceInfoMenu = ({space, memberCount, onShowMembers}: Props) => {
+    const {formatMessage} = useIntl();
+    const {paths} = useDocsNavigation();
+    const {canManageMembers} = useSpacePermissions(space.id);
+
+    const openSettings = useCallback(() => {
+        openDocsModal((modal) => (
+            <SpaceSettingsModal
+                space={space}
+                onClose={modal.close}
+            />
+        ));
+    }, [space]);
+
+    const copyLink = useCallback(() => {
+        copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
+    }, [paths, space.id]);
+
+    return (
+        <nav
+            className={styles.menu}
+            aria-label={formatMessage({id: 'docs.spaceInfo.menu.title', defaultMessage: 'Space info actions'})}
+        >
+            {canManageMembers && (
+                <SpaceInfoMenuItem
+                    icon={<CogOutlineIcon size={18}/>}
+                    text={formatMessage({id: 'docs.spaceInfo.menu.settings', defaultMessage: 'Space settings'})}
+                    onClick={openSettings}
+                />
+            )}
+            <SpaceInfoMenuItem
+                icon={<AccountMultipleOutlineIcon size={18}/>}
+                text={formatMessage({id: 'docs.spaceInfo.menu.members', defaultMessage: 'Members'})}
+                badge={memberCount}
+                opensPanel={true}
+                onClick={onShowMembers}
+            />
+            <SpaceInfoMenuItem
+                icon={<LinkVariantIcon size={18}/>}
+                text={formatMessage({id: 'docs.spaceInfo.menu.copyLink', defaultMessage: 'Copy link'})}
+                onClick={copyLink}
+            />
+        </nav>
+    );
+};
+
+export default SpaceInfoMenu;
diff --git a/webapp/src/components/space_info/space_info_panel.module.scss b/webapp/src/components/space_info/space_info_panel.module.scss
index f8e6d2f..a2b590e 100644
--- a/webapp/src/components/space_info/space_info_panel.module.scss
+++ b/webapp/src/components/space_info/space_info_panel.module.scss
@@ -1,22 +1,20 @@
+// Full-height right column; the width comes from the resize hook, so the panel
+// only holds its flex/`position` context here. `position: relative` anchors the
+// resize handle on the left edge.
 .panel {
+    position: relative;
     display: flex;
-    flex: 0 0 320px;
+    flex-shrink: 0;
     flex-direction: column;
-    width: 320px;
+    height: 100%;
     min-height: 0;
     border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
     background: var(--center-channel-bg);
 }
 
-.header {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    height: 48px;
-    padding: 0 8px 0 16px;
-    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+// Dragging sets the width every frame; no transition to fight the pointer.
+.resizing {
+    transition: none;
 }
 
 .headerTitle {
@@ -101,6 +99,58 @@
     line-height: 20px;
 }
 
+// Clickable description with a trailing pencil that fades in on hover, ported
+// from core's channel_info_rhs EditableArea. Scoped under `.btn.btn-sm` to beat
+// core's quaternary color/padding; the negative inline margin keeps the text
+// aligned with the section while the padding gives the hover surface room.
+.editableArea:global(.btn.btn-sm) {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    width: 100%;
+    height: auto;
+    margin-inline-start: -8px;
+    padding: 4px 8px;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: left;
+    white-space: normal;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+
+    &:hover .editIcon,
+    &:focus-visible .editIcon {
+        opacity: 1;
+    }
+}
+
+.editableText {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    // Keeps the description selectable even though it sits inside a button.
+    user-select: text;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.editablePlaceholder {
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+}
+
+.editIcon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    opacity: 0;
+    transition: opacity 150ms ease;
+}
+
 .memberList {
     display: flex;
     flex-direction: column;
diff --git a/webapp/src/components/space_info/space_info_panel.tsx b/webapp/src/components/space_info/space_info_panel.tsx
index 3ee11fc..4daccb6 100644
--- a/webapp/src/components/space_info/space_info_panel.tsx
+++ b/webapp/src/components/space_info/space_info_panel.tsx
@@ -1,22 +1,41 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import {useSpaceMemberProfiles} from 'hooks/members';
+import {useAppDispatch} from 'hooks/redux';
+import {useSidebarWidth} from 'hooks/sidebar_width';
 import {useSpaceStats} from 'hooks/spaces';
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
-import {Avatar, Timestamp} from 'webapp_globals';
+import {SPACE_DESCRIPTION_MAX_LENGTH} from 'validation/space_schema';
+import {Timestamp} from 'webapp_globals';
 import type {TimestampUnit} from 'webapp_globals';
 
+import ChevronLeftIcon from '@mattermost/compass-icons/components/chevron-left';
 import CloseIcon from '@mattermost/compass-icons/components/close';
+import PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';
 
+import {updateSpace} from 'store/actions';
+import {useSpacePermissions} from 'store/permissions';
+
+import BasicInputModal from 'components/basic_input_modal/basic_input_modal';
 import {Button} from 'components/form_controls/button';
+import Header from 'components/header/header';
+import {openDocsModal} from 'components/modals';
+import ResizableDivider from 'components/resizable_divider/resizable_divider';
 
 import type {Space} from 'types/docs';
 
+import SpaceInfoMembers from './space_info_members';
+import SpaceInfoMenu from './space_info_menu';
 import styles from './space_info_panel.module.scss';
 
+const DEFAULT_INFO_WIDTH = 400;
+const MIN_INFO_WIDTH = 304;
+const MAX_INFO_WIDTH = 776;
+
 // Relative "Created …" buckets for the host Timestamp, mirroring the page header's
 // relative spec but reaching back far enough for an old space.
 const CREATED_TIME_SPEC: TimestampUnit[] = [
@@ -27,140 +46,204 @@ const CREATED_TIME_SPEC: TimestampUnit[] = [
     'year',
 ];
 
+// The panel's navigation: the root screen, or a drilled-into sub-panel. Owned by
+// the space view, so other chrome (the header's members controls) can open the
+// panel straight onto a sub-panel.
+export type SpaceInfoView = 'root' | 'members';
+
 type Props = {
     space: Space;
+    view: SpaceInfoView;
+    onViewChange: (view: SpaceInfoView) => void;
     onClose: () => void;
 };
 
-// Read-only right-hand panel mirroring core's Channel Info RHS: a header with a
-// close control over sections for the space identity, its description, its
-// members, and a small meta area. Editing lives in Space Settings, so nothing
-// here mutates the space.
-const SpaceInfoPanel = ({space, onClose}: Props) => {
+// Right-hand panel mirroring core's Channel Info RHS: a full-height column whose
+// header shares the product header chrome (so it lines up with the space header),
+// over the space identity, its inline-editable description, an action menu, the
+// member list, and a small meta area. The description is the only field editable
+// from here; everything else is read-only and lives in Space Settings.
+const SpaceInfoPanel = ({space, view, onViewChange, onClose}: Props) => {
     const {formatMessage} = useIntl();
     const {pageCount, memberCount} = useSpaceStats(space.id);
     const members = useSpaceMemberProfiles(space.id);
+    const {width, setWidth, commitWidth} = useSidebarWidth('spaceInfo', DEFAULT_INFO_WIDTH);
+    const [resizing, setResizing] = useState(false);
+    const dispatch = useAppDispatch();
+    const {canManageMembers} = useSpacePermissions(space.id);
 
     const closeLabel = formatMessage({id: 'docs.spaceInfo.close', defaultMessage: 'Close info'});
+    const backLabel = formatMessage({id: 'docs.spaceInfo.back', defaultMessage: 'Back to space info'});
+    const editDescriptionLabel = formatMessage({id: 'docs.spaceInfo.editDescription', defaultMessage: 'Edit description'});
+
+    // The description is the one field editable from here; everything else lives
+    // in Space Settings. An empty value clears it, so the modal allows empty.
+    const editDescription = useCallback(() => {
+        openDocsModal((modal) => (
+            <BasicInputModal
+                title={editDescriptionLabel}
+                label={formatMessage({id: 'docs.spaceInfo.descriptionLabel', defaultMessage: 'Space description'})}
+                initialValue={space.description ?? ''}
+                maxLength={SPACE_DESCRIPTION_MAX_LENGTH}
+                multiline={true}
+                allowEmpty={true}
+                onConfirm={async (description) => {
+                    await dispatch(updateSpace(space.id, {description}));
+                }}
+                onClose={modal.close}
+            />
+        ));
+    }, [dispatch, editDescriptionLabel, formatMessage, space.description, space.id]);
 
     // Timestamp's `style` is a narrow/short/long format variant, not a DOM style object.
     /* eslint-disable react/style-prop-object */
-    const createdRelative = Timestamp ? (
+    const createdRelative = (
         <Timestamp
             value={space.create_at}
             units={CREATED_TIME_SPEC}
             useTime={false}
             style='long'
         />
-    ) : null;
+    );
     /* eslint-enable react/style-prop-object */
 
     return (
         <aside
-            className={styles.panel}
+            className={classNames(styles.panel, {[styles.resizing]: resizing})}
+            style={{width}}
             aria-label={formatMessage({id: 'docs.spaceInfo.title', defaultMessage: 'Space info'})}
         >
-            <div className={styles.header}>
-                <h2 className={styles.headerTitle}>
-                    <FormattedMessage
-                        id='docs.spaceInfo.title'
-                        defaultMessage='Space info'
-                    />
-                </h2>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className='btn-icon'
-                    aria-label={closeLabel}
-                    onClick={onClose}
-                >
-                    <CloseIcon size={18}/>
-                </Button>
-            </div>
-
-            <div className={styles.body}>
-                <div className={styles.identity}>
-                    <span
-                        className={styles.icon}
-                        aria-hidden={true}
+            <ResizableDivider
+                ariaLabel={formatMessage({id: 'docs.spaceInfo.resize', defaultMessage: 'Resize space info'})}
+                side='right'
+                width={width}
+                minWidth={MIN_INFO_WIDTH}
+                maxWidth={MAX_INFO_WIDTH}
+                defaultWidth={DEFAULT_INFO_WIDTH}
+                onResize={(next) => {
+                    setResizing(true);
+                    setWidth(next);
+                }}
+                onResizeEnd={(next) => {
+                    setResizing(false);
+                    commitWidth(next);
+                }}
+            />
+            <Header
+                left={(
+                    <>
+                        {view !== 'root' && (
+                            <Button
+                                emphasis='quaternary'
+                                size='sm'
+                                className='btn-icon'
+                                tooltip={backLabel}
+                                onClick={() => onViewChange('root')}
+                            >
+                                <ChevronLeftIcon size={18}/>
+                            </Button>
+                        )}
+                        <h2 className={styles.headerTitle}>
+                            {view === 'members' ? (
+                                <FormattedMessage
+                                    id='docs.spaceInfo.members'
+                                    defaultMessage='Members'
+                                />
+                            ) : (
+                                <FormattedMessage
+                                    id='docs.spaceInfo.title'
+                                    defaultMessage='Space info'
+                                />
+                            )}
+                        </h2>
+                    </>
+                )}
+                right={(
+                    <Button
+                        emphasis='quaternary'
+                        size='sm'
+                        className='btn-icon'
+                        aria-label={closeLabel}
+                        onClick={onClose}
                     >
-                        <SpaceIcon
-                            space={space}
-                            size={40}
-                        />
-                    </span>
-                    <span className={styles.spaceTitle}>{space.title}</span>
+                        <CloseIcon size={18}/>
+                    </Button>
+                )}
+            />
+
+            {view === 'members' && (
+                <div className={styles.body}>
+                    <SpaceInfoMembers members={members}/>
                 </div>
+            )}
 
-                <section className={styles.section}>
-                    <h3 className={styles.sectionTitle}>
-                        <FormattedMessage
-                            id='docs.spaceInfo.description'
-                            defaultMessage='Description'
-                        />
-                    </h3>
-                    {space.description ? (
-                        <p className={styles.description}>{space.description}</p>
-                    ) : (
-                        <p className={styles.placeholder}>
+            {view === 'root' && (
+                <div className={styles.body}>
+                    <div className={styles.identity}>
+                        <span
+                            className={styles.icon}
+                            aria-hidden={true}
+                        >
+                            <SpaceIcon
+                                space={space}
+                                size={40}
+                            />
+                        </span>
+                        <span className={styles.spaceTitle}>{space.title}</span>
+                    </div>
+
+                    <section className={styles.section}>
+                        <h3 className={styles.sectionTitle}>
                             <FormattedMessage
-                                id='docs.spaceInfo.descriptionPlaceholder'
-                                defaultMessage='Add a space description'
+                                id='docs.spaceInfo.description'
+                                defaultMessage='Description'
                             />
-                        </p>
-                    )}
-                </section>
-
-                <section className={styles.section}>
-                    <h3 className={styles.sectionTitle}>
-                        <FormattedMessage
-                            id='docs.spaceInfo.members'
-                            defaultMessage='Members'
-                        />
-                        <span className={styles.count}>{memberCount}</span>
-                    </h3>
-                    <div className={styles.memberList}>
-                        {members.map((member) => (
-                            <div
-                                key={member.id}
-                                className={styles.memberRow}
+                        </h3>
+                        {canManageMembers ? (
+
+                        // The whole description is the edit target, with a pencil
+                        // revealed on hover — core's channel-info EditableArea.
+                            <Button
+                                emphasis='quaternary'
+                                size='sm'
+                                className={styles.editableArea}
+                                aria-label={editDescriptionLabel}
+                                onClick={editDescription}
                             >
-                                <Avatar
-                                    url={member.avatarUrl}
-                                    username={member.username}
-                                    size='sm'
-                                    name=''
-                                />
-                                <span className={styles.memberInfo}>
-                                    <span className={styles.memberName}>{member.displayName}</span>
-                                    {member.username && (
-                                        <span className={styles.memberUsername}>
-                                            <FormattedMessage
-                                                id='docs.spaceInfo.handle'
-                                                defaultMessage='@{username}'
-                                                values={{username: member.username}}
-                                            />
-                                        </span>
-                                    )}
+                                <span className={classNames(styles.editableText, {[styles.editablePlaceholder]: !space.description})}>
+                                    {space.description || formatMessage({id: 'docs.spaceInfo.descriptionPlaceholder', defaultMessage: 'Add a space description'})}
                                 </span>
-                            </div>
-                        ))}
-                    </div>
-                </section>
+                                <span
+                                    className={styles.editIcon}
+                                    aria-hidden={true}
+                                >
+                                    <PencilOutlineIcon size={14}/>
+                                </span>
+                            </Button>
+                        ) : (
+                            <p className={space.description ? styles.description : styles.placeholder}>
+                                {space.description || formatMessage({id: 'docs.spaceInfo.noDescription', defaultMessage: 'No description'})}
+                            </p>
+                        )}
+                    </section>
 
-                <section className={styles.section}>
-                    <dl className={styles.meta}>
-                        <div className={styles.metaRow}>
-                            <dt className={styles.metaLabel}>
-                                <FormattedMessage
-                                    id='docs.spaceInfo.pages'
-                                    defaultMessage='Pages'
-                                />
-                            </dt>
-                            <dd className={styles.metaValue}>{pageCount}</dd>
-                        </div>
-                        {createdRelative && (
+                    <SpaceInfoMenu
+                        space={space}
+                        memberCount={memberCount}
+                        onShowMembers={() => onViewChange('members')}
+                    />
+
+                    <section className={styles.section}>
+                        <dl className={styles.meta}>
+                            <div className={styles.metaRow}>
+                                <dt className={styles.metaLabel}>
+                                    <FormattedMessage
+                                        id='docs.spaceInfo.pages'
+                                        defaultMessage='Pages'
+                                    />
+                                </dt>
+                                <dd className={styles.metaValue}>{pageCount}</dd>
+                            </div>
                             <div className={styles.metaRow}>
                                 <dt className={styles.metaLabel}>
                                     <FormattedMessage
@@ -170,10 +253,10 @@ const SpaceInfoPanel = ({space, onClose}: Props) => {
                                 </dt>
                                 <dd className={styles.metaValue}>{createdRelative}</dd>
                             </div>
-                        )}
-                    </dl>
-                </section>
-            </div>
+                        </dl>
+                    </section>
+                </div>
+            )}
         </aside>
     );
 };
diff --git a/webapp/src/components/space_settings_modal/space_settings_modal.module.scss b/webapp/src/components/space_settings_modal/space_settings_modal.module.scss
index 8f52eba..ec6e599 100644
--- a/webapp/src/components/space_settings_modal/space_settings_modal.module.scss
+++ b/webapp/src/components/space_settings_modal/space_settings_modal.module.scss
@@ -1,162 +1,135 @@
 .modal {
-    width: 720px;
+    position: relative;
+    width: 896px;
+    height: 600px;
     max-width: calc(100vw - 48px);
 }
 
-.subtitle {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: rgba(var(--center-channel-color-rgb), 0.64);
-    font-size: 13px;
-    font-weight: 600;
-}
-
-.subtitleIcon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+// Floats the unsaved-changes bar over the content column (right of the settings
+// nav), anchored to the modal's bottom.
+.floatingFooter {
+    position: absolute;
+    right: 24px;
+    bottom: 24px;
+    left: 256px;
+    z-index: 2;
 }
 
 .body {
     display: flex;
-    min-height: 440px;
+    flex: 1 1 auto;
+    min-height: 0;
     overflow: hidden;
 }
 
 .nav {
     display: flex;
-    flex: 0 0 208px;
+    flex: 0 0 232px;
     flex-direction: column;
-    gap: 2px;
-    padding: 16px 12px;
+    gap: 8px;
+    padding: 24px;
     border-right: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: rgba(var(--center-channel-color-rgb), 0.04);
 }
 
-.navItem {
-    justify-content: flex-start;
-    width: 100%;
-    gap: 10px;
-    color: rgba(var(--center-channel-color-rgb), 0.75);
-    font-weight: 600;
-    text-align: left;
-
-    &:hover {
-        background: rgba(var(--center-channel-color-rgb), 0.08);
-    }
-}
-
-.navItemActive {
-    background: rgba(var(--button-bg-rgb), 0.08);
-    color: var(--button-bg);
-
-    &:hover {
-        background: rgba(var(--button-bg-rgb), 0.12);
-    }
-}
-
-.navItemDestructive {
-    color: var(--error-text);
-
-    &:hover {
-        background: rgba(var(--error-text-color-rgb), 0.08);
-    }
-}
-
-.navLabel {
+.pane {
     flex: 1 1 auto;
     min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    padding: 28px 32px;
+    overflow-y: auto;
 }
 
-.pane {
+.panelContent {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.section {
     display: flex;
-    flex: 1 1 auto;
     flex-direction: column;
     gap: 16px;
-    padding: 24px 32px;
-    overflow-y: auto;
+
+    & + & {
+        padding-top: 24px;
+        border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    }
 }
 
-.heading {
+.sectionTitle {
     margin: 0;
     color: var(--center-channel-color);
     font-family: 'Metropolis', sans-serif;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 600;
     line-height: 24px;
 }
 
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
 .fieldLabel {
-    margin-bottom: -8px;
     color: rgba(var(--center-channel-color-rgb), 0.75);
-    font-size: 13px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 12px;
     font-weight: 600;
+    line-height: 16px;
 }
 
 .helper {
-    margin-top: -8px;
+    margin: 0;
     color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-family: 'Open Sans', sans-serif;
     font-size: 12px;
+    font-weight: 400;
     line-height: 16px;
 }
 
 .urlRow {
     display: flex;
+    min-width: 0;
     align-items: center;
-    gap: 12px;
-    padding: 8px 12px;
-    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-    border-radius: 4px;
-    background: rgba(var(--center-channel-color-rgb), 0.04);
+    gap: 4px;
 }
 
 .urlText {
-    flex: 1 1 auto;
-    min-width: 0;
     overflow: hidden;
-    color: rgba(var(--center-channel-color-rgb), 0.75);
-    font-size: 13px;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    font-size: 12px;
+    line-height: 16px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.selectStub {
-    justify-content: space-between;
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-    border-radius: 4px;
-    color: rgba(var(--center-channel-color-rgb), 0.75);
-    font-weight: 600;
+.inlineButton:global(.btn) {
+    height: auto;
+    min-height: 0;
+    padding: 0 4px;
+    font-size: 12px;
+    line-height: 16px;
 }
 
-.selectStubLabel {
+.mutedIcon {
     display: flex;
-    flex: 1 1 auto;
-    min-width: 0;
+    flex-shrink: 0;
     align-items: center;
-    gap: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.error {
-    color: var(--error-text);
-    font-size: 13px;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
 }
 
-.searchStub {
-    width: 100%;
-    padding: 10px 12px;
+.search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
     border-radius: 4px;
-    background: rgba(var(--center-channel-color-rgb), 0.04);
-    color: rgba(var(--center-channel-color-rgb), 0.56);
+    background: var(--center-channel-bg);
+    color: rgba(var(--center-channel-color-rgb), 0.64);
     font-size: 14px;
+    line-height: 20px;
 }
 
 .memberList {
@@ -167,79 +140,99 @@
 .memberRow {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 8px 0;
+    gap: 10px;
+    padding: 8px 16px;
 }
 
 .memberInfo {
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
-    align-items: baseline;
-    gap: 6px;
+    align-items: center;
+    gap: 8px;
+    padding: 0 4px;
 }
 
 .memberName {
     color: var(--center-channel-color);
     font-size: 14px;
-    font-weight: 600;
+    line-height: 20px;
     white-space: nowrap;
 }
 
 .memberUsername {
     overflow: hidden;
-    color: rgba(var(--center-channel-color-rgb), 0.64);
-    font-size: 14px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
+    line-height: 16px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .roleTrigger {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
     gap: 4px;
+    padding: 4px 6px 4px 8px;
     color: var(--link-color);
+    font-size: 12px;
     font-weight: 600;
+    line-height: 16px;
 }
 
 .toggleRow {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     gap: 16px;
-    padding: 12px 0;
-    border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
 }
 
 .toggleText {
     display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
     flex-direction: column;
-    gap: 2px;
 }
 
 .toggleTitle {
     color: var(--center-channel-color);
     font-size: 14px;
     font-weight: 600;
+    line-height: 20px;
 }
 
-.comingSoon {
+.comingSoonPill {
+    flex-shrink: 0;
+    padding: 2px 8px;
+    border-radius: 10px;
+    background: rgba(var(--center-channel-color-rgb), 0.08);
     color: rgba(var(--center-channel-color-rgb), 0.64);
-    font-size: 14px;
-    line-height: 20px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 16px;
+    white-space: nowrap;
 }
 
 .archiveCard {
     display: flex;
     flex-direction: column;
-    gap: 12px;
     align-items: flex-start;
+    gap: 12px;
     padding: 16px;
     border: 1px solid rgba(var(--error-text-color-rgb), 0.24);
     border-radius: 4px;
     background: rgba(var(--error-text-color-rgb), 0.04);
 }
 
-.archiveCopy {
+.copy {
+    margin: 0;
     color: rgba(var(--center-channel-color-rgb), 0.75);
     font-size: 14px;
     line-height: 20px;
 }
+
+.error {
+    color: var(--error-text);
+    font-size: 12px;
+    line-height: 16px;
+}
diff --git a/webapp/src/components/space_settings_modal/space_settings_modal.test.tsx b/webapp/src/components/space_settings_modal/space_settings_modal.test.tsx
index 2aeb26e..cd1e420 100644
--- a/webapp/src/components/space_settings_modal/space_settings_modal.test.tsx
+++ b/webapp/src/components/space_settings_modal/space_settings_modal.test.tsx
@@ -1,12 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {fireEvent, screen} from '@testing-library/react';
+import {fireEvent, screen, waitFor} from '@testing-library/react';
 import React from 'react';
 
 import {deleteSpace, updateSpace} from 'store/actions';
 import {makeSpace} from 'store/test_fixtures';
 
+import {DocsModalController, closeAllDocsModals} from 'components/modals';
+
 import SpaceSettingsModal from './space_settings_modal';
 
 import {renderWithContext} from '../../../tests/react_testing_utils';
@@ -16,6 +18,7 @@ const mockGoHome = jest.fn();
 jest.mock('store/actions', () => ({
     updateSpace: jest.fn(() => () => Promise.resolve()),
     deleteSpace: jest.fn(() => () => Promise.resolve()),
+    fetchPages: jest.fn(() => () => Promise.resolve([])),
 }));
 
 const mockUpdateSpace = updateSpace as jest.Mock;
@@ -35,7 +38,11 @@ jest.mock('hooks/members', () => ({
 const space = makeSpace('space-1', 'Project Avalanche');
 
 describe('SpaceSettingsModal', () => {
-    it('renders the title, space subtitle, and section tabs', () => {
+    afterEach(() => {
+        closeAllDocsModals();
+    });
+
+    it('renders the title and section tabs, with the initial tab selected', () => {
         renderWithContext(
             <SpaceSettingsModal
                 space={space}
@@ -44,13 +51,13 @@ describe('SpaceSettingsModal', () => {
         );
 
         expect(screen.getByRole('heading', {name: 'Space Settings'})).toBeInTheDocument();
-        expect(screen.getByRole('button', {name: /Info/})).toBeInTheDocument();
-        expect(screen.getByRole('button', {name: /Permissions/})).toBeInTheDocument();
-        expect(screen.getByRole('button', {name: /Configuration/})).toBeInTheDocument();
-        expect(screen.getByRole('button', {name: /Archive space/})).toBeInTheDocument();
+        expect(screen.getByRole('tab', {name: /Info/, selected: true})).toBeInTheDocument();
+        expect(screen.getByRole('tab', {name: /Permissions/, selected: false})).toBeInTheDocument();
+        expect(screen.getByRole('tab', {name: /Configuration/})).toBeInTheDocument();
+        expect(screen.getByRole('tab', {name: /Archive space/})).toBeInTheDocument();
     });
 
-    it('keeps Save disabled until a field changes, then dispatches updateSpace', () => {
+    it('surfaces the save bar after a change, then dispatches updateSpace', () => {
         const onClose = jest.fn();
         renderWithContext(
             <SpaceSettingsModal
@@ -59,34 +66,45 @@ describe('SpaceSettingsModal', () => {
             />,
         );
 
-        const save = screen.getByRole('button', {name: 'Save'});
-        expect(save).toBeDisabled();
+        // The floating save bar only appears once there are unsaved changes.
+        expect(screen.queryByRole('button', {name: 'Save'})).not.toBeInTheDocument();
 
         fireEvent.change(screen.getByLabelText('Space name'), {target: {value: 'Renamed'}});
+
+        const save = screen.getByRole('button', {name: 'Save'});
         expect(save).toBeEnabled();
 
         fireEvent.click(save);
-        expect(mockUpdateSpace).toHaveBeenCalledWith('space-1', {title: 'Renamed', description: ''});
+
+        // Props are sent merged (they replace the map server-side); the landing
+        // page is unset, so it saves as the space front door.
+        expect(mockUpdateSpace).toHaveBeenCalledWith('space-1', {
+            title: 'Renamed',
+            description: '',
+            props: {default_page_id: ''},
+        });
     });
 
     it('archives the space through a confirm dialog', async () => {
         const onClose = jest.fn();
         renderWithContext(
-            <SpaceSettingsModal
-                space={space}
-                onClose={onClose}
-                initialTab='archive'
-            />,
+            <>
+                <SpaceSettingsModal
+                    space={space}
+                    onClose={onClose}
+                    initialTab='archive'
+                />
+                <DocsModalController/>
+            </>,
         );
 
-        // The left-nav tab and the in-card action both read "Archive space";
-        // the card button is the later one in DOM order.
-        const archiveButtons = screen.getAllByRole('button', {name: 'Archive space'});
-        fireEvent.click(archiveButtons[archiveButtons.length - 1]);
-        fireEvent.click(screen.getByRole('button', {name: 'Archive'}));
+        // The nav is a tab (role="tab"); the in-card action is the only button
+        // named "Archive space". It opens a confirm dialog through the modal
+        // controller, whose confirm button reads "Archive".
+        fireEvent.click(screen.getByRole('button', {name: 'Archive space'}));
+        fireEvent.click(await screen.findByRole('button', {name: 'Archive'}));
 
         expect(mockDeleteSpace).toHaveBeenCalledWith('space-1');
-        await Promise.resolve();
-        expect(mockGoHome).toHaveBeenCalled();
+        await waitFor(() => expect(mockGoHome).toHaveBeenCalled());
     });
 });
diff --git a/webapp/src/components/space_settings_modal/space_settings_modal.tsx b/webapp/src/components/space_settings_modal/space_settings_modal.tsx
index 63f7e38..360457b 100644
--- a/webapp/src/components/space_settings_modal/space_settings_modal.tsx
+++ b/webapp/src/components/space_settings_modal/space_settings_modal.tsx
@@ -1,11 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import classNames from 'classnames';
 import {useSpaceMemberProfiles} from 'hooks/members';
 import {useDocsNavigation} from 'hooks/navigation';
-import {useAppDispatch} from 'hooks/redux';
-import React, {useMemo, useState} from 'react';
+import {useAppDispatch, useAppSelector} from 'hooks/redux';
+import React, {useEffect, useMemo, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
 import {Avatar} from 'webapp_globals';
@@ -13,21 +12,30 @@ import {Avatar} from 'webapp_globals';
 import ArchiveOutlineIcon from '@mattermost/compass-icons/components/archive-outline';
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
 import CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';
+import FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';
 import GlobeIcon from '@mattermost/compass-icons/components/globe';
+import HomeVariantOutlineIcon from '@mattermost/compass-icons/components/home-variant-outline';
 import InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';
 import LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';
+import MagnifyIcon from '@mattermost/compass-icons/components/magnify';
 import type IconProps from '@mattermost/compass-icons/components/props';
 import ShieldOutlineIcon from '@mattermost/compass-icons/components/shield-outline';
 
-import {deleteSpace, updateSpace} from 'store/actions';
+import {deleteSpace, fetchPages, updateSpace} from 'store/actions';
+import {getPagesForSpace, getSpace} from 'store/selectors';
 
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
-import {Button, DestructiveButton, PrimaryButton, TertiaryButton} from 'components/form_controls/button';
+import {Button, DestructiveButton} from 'components/form_controls/button';
 import PublicPrivateSelector from 'components/form_controls/public_private_selector';
+import Select from 'components/form_controls/select';
+import type {SelectOption} from 'components/form_controls/select';
 import TextArea from 'components/form_controls/text_area';
 import TextInput from 'components/form_controls/text_input';
 import GenericModal from 'components/generic_modal/generic_modal';
+import SaveChangesBar from 'components/save_changes_bar/save_changes_bar';
+import {Tab, TabList, TabPanel, Tabs, TabsSeparator} from 'components/tabs/tabs';
 
+import {SPACE_PROP_DEFAULT_PAGE_ID} from 'types/docs';
 import type {Space} from 'types/docs';
 
 import styles from './space_settings_modal.module.scss';
@@ -44,6 +52,11 @@ type TabDef = {
     id: SpaceSettingsTab;
     label: string;
     icon: React.ComponentType<IconProps>;
+
+    // Renders a separator above the item, grouping the destructive action away
+    // from the settings sections.
+    separated?: boolean;
+
     destructive?: boolean;
 };
 
@@ -56,132 +69,175 @@ const SpaceSettingsModal = ({space, onClose, initialTab = 'info'}: Props) => {
         {id: 'info', label: formatMessage({id: 'docs.spaceSettings.tab.info', defaultMessage: 'Info'}), icon: InformationOutlineIcon},
         {id: 'permissions', label: formatMessage({id: 'docs.spaceSettings.tab.permissions', defaultMessage: 'Permissions'}), icon: ShieldOutlineIcon},
         {id: 'configuration', label: formatMessage({id: 'docs.spaceSettings.tab.configuration', defaultMessage: 'Configuration'}), icon: CogOutlineIcon},
-        {id: 'archive', label: formatMessage({id: 'docs.spaceSettings.tab.archive', defaultMessage: 'Archive space'}), icon: ArchiveOutlineIcon, destructive: true},
+        {id: 'archive', label: formatMessage({id: 'docs.spaceSettings.tab.archive', defaultMessage: 'Archive space'}), icon: ArchiveOutlineIcon, separated: true, destructive: true},
     ];
 
-    const info = useInfoTab(space, onClose);
+    const info = useInfoTab(space);
+    const [discarding, setDiscarding] = useState(false);
 
-    const footer = activeTab === 'info' ? (
-        <>
-            <TertiaryButton
-                type='button'
-                onClick={onClose}
-            >
-                <FormattedMessage
-                    id='docs.spaceSettings.cancel'
-                    defaultMessage='Cancel'
-                />
-            </TertiaryButton>
-            <PrimaryButton
-                type='button'
-                disabled={!info.canSave}
-                onClick={info.save}
-            >
-                <FormattedMessage
-                    id='docs.spaceSettings.save'
-                    defaultMessage='Save'
-                />
-            </PrimaryButton>
-        </>
-    ) : undefined;
+    // Guard the close affordances (backdrop, Esc, ✕) when there are unsaved
+    // edits, confirming a discard before actually closing.
+    const handleClose = () => {
+        if (info.dirty) {
+            setDiscarding(true);
+            return;
+        }
+        onClose();
+    };
 
-    const subtitle = (
-        <span className={styles.subtitle}>
-            <span
-                className={styles.subtitleIcon}
-                aria-hidden={true}
-            >
-                <SpaceIcon
-                    space={space}
-                    size={16}
-                />
-            </span>
-            {space.title}
-        </span>
+    const title = (
+        <FormattedMessage
+            id='docs.spaceSettings.title'
+            defaultMessage='Space Settings'
+        />
     );
 
     return (
         <GenericModal
             className={styles.modal}
-            title={formatMessage({id: 'docs.spaceSettings.title', defaultMessage: 'Space Settings'})}
+            title={title}
             ariaLabel={formatMessage({id: 'docs.spaceSettings.title', defaultMessage: 'Space Settings'})}
-            headerContent={subtitle}
-            onClose={onClose}
-            footer={footer}
+            onClose={handleClose}
         >
-            <div className={styles.body}>
-                <nav
+            <Tabs
+                className={styles.body}
+                orientation='vertical'
+                value={activeTab}
+                onValueChange={(value) => setActiveTab(value as SpaceSettingsTab)}
+            >
+                <TabList
                     className={styles.nav}
                     aria-label={formatMessage({id: 'docs.spaceSettings.navLabel', defaultMessage: 'Space settings sections'})}
                 >
                     {tabs.map((tab) => {
                         const Icon = tab.icon;
-                        const active = tab.id === activeTab;
                         return (
-                            <Button
-                                key={tab.id}
-                                type='button'
-                                emphasis='quaternary'
-                                size='sm'
-                                aria-current={active}
-                                className={classNames(styles.navItem, {
-                                    [styles.navItemActive]: active,
-                                    [styles.navItemDestructive]: tab.destructive && !active,
-                                })}
-                                onClick={() => setActiveTab(tab.id)}
-                            >
-                                <Icon size={16}/>
-                                <span className={styles.navLabel}>{tab.label}</span>
-                            </Button>
+                            <React.Fragment key={tab.id}>
+                                {tab.separated && <TabsSeparator/>}
+                                <Tab
+                                    value={tab.id}
+                                    leadingIcon={<Icon size={16}/>}
+                                    destructive={tab.destructive}
+                                >
+                                    {tab.label}
+                                </Tab>
+                            </React.Fragment>
                         );
                     })}
-                </nav>
+                </TabList>
 
-                <div
-                    className={styles.pane}
-                    role='tabpanel'
-                >
-                    {activeTab === 'info' && (
+                <div className={styles.pane}>
+                    <TabPanel
+                        value='info'
+                        className={styles.panelContent}
+                    >
                         <InfoTab
                             space={space}
                             info={info}
                             url={`${window.location.origin}${paths.space(space.id)}`}
                         />
-                    )}
-                    {activeTab === 'permissions' && <PermissionsTab space={space}/>}
-                    {activeTab === 'configuration' && <ConfigurationTab/>}
-                    {activeTab === 'archive' && (
+                    </TabPanel>
+                    <TabPanel
+                        value='permissions'
+                        className={styles.panelContent}
+                    >
+                        <PermissionsTab space={space}/>
+                    </TabPanel>
+                    <TabPanel
+                        value='configuration'
+                        className={styles.panelContent}
+                    >
+                        <ConfigurationTab/>
+                    </TabPanel>
+                    <TabPanel
+                        value='archive'
+                        className={styles.panelContent}
+                    >
                         <ArchiveTab
                             space={space}
                             onClose={onClose}
                         />
-                    )}
+                    </TabPanel>
                 </div>
-            </div>
+            </Tabs>
+            {info.dirty && (
+                <div className={styles.floatingFooter}>
+                    <SaveChangesBar
+                        state={info.error ? 'error' : 'editing'}
+                        errorMessage={info.error}
+                        saving={info.saving}
+                        onSave={info.save}
+                        onReset={info.reset}
+                    />
+                </div>
+            )}
+
+            {/* Nested inside this dialog's tree so Base UI stacks it as a child
+                dialog rather than a sibling at the app root. */}
+            {discarding && (
+                <ConfirmModal
+                    isConfirmDestructive={true}
+                    title={formatMessage({id: 'docs.spaceSettings.discard.title', defaultMessage: 'Discard unsaved changes?'})}
+                    confirmButtonText={formatMessage({id: 'docs.spaceSettings.discard.confirm', defaultMessage: 'Discard changes'})}
+                    onConfirm={() => {
+                        setDiscarding(false);
+                        onClose();
+                    }}
+                    onCancel={() => setDiscarding(false)}
+                >
+                    <FormattedMessage
+                        id='docs.spaceSettings.discard.body'
+                        defaultMessage='Your unsaved changes to this space will be lost.'
+                    />
+                </ConfirmModal>
+            )}
         </GenericModal>
     );
 };
 
+const Section = ({title, children}: {title: React.ReactNode; children: React.ReactNode}) => (
+    <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        {children}
+    </section>
+);
+
 type InfoTabState = {
     name: string;
     setName: (value: string) => void;
     description: string;
     setDescription: (value: string) => void;
+
+    // '' = the space front door (hero) rather than a specific page.
+    landingPageId: string;
+    setLandingPageId: (value: string) => void;
     error?: string;
+    dirty: boolean;
     canSave: boolean;
+    saving: boolean;
     save: () => void;
+    reset: () => void;
 };
 
-// Owns the editable Info-tab fields and the save flow so the footer (rendered by
-// the modal shell) and the pane share one source of truth.
-function useInfoTab(space: Space, onClose: () => void): InfoTabState {
+// Owns the editable Info-tab fields and the save flow. The baseline is read live
+// from the store (via getSpace) so a successful save clears the dirty state and
+// the floating save bar without closing the modal. Save no longer closes; the
+// user dismisses the modal themselves (guarded when there are unsaved changes).
+function useInfoTab(space: Space): InfoTabState {
     const dispatch = useAppDispatch();
+    const liveSpace = useAppSelector((state) => getSpace(state, space.id)) ?? space;
+
+    const savedLandingPageId = liveSpace.props?.[SPACE_PROP_DEFAULT_PAGE_ID] ?? '';
+
     const [name, setName] = useState(space.title);
     const [description, setDescription] = useState(space.description ?? '');
+    const [landingPageId, setLandingPageId] = useState(savedLandingPageId);
     const [error, setError] = useState<string>();
     const [saving, setSaving] = useState(false);
 
-    const dirty = name.trim() !== space.title || description.trim() !== (space.description ?? '');
+    const dirty = name.trim() !== liveSpace.title ||
+        description.trim() !== (liveSpace.description ?? '') ||
+        landingPageId !== savedLandingPageId;
     const canSave = dirty && Boolean(name.trim()) && !saving;
 
     const save = async () => {
@@ -191,112 +247,130 @@ function useInfoTab(space: Space, onClose: () => void): InfoTabState {
         setSaving(true);
         setError(undefined);
         try {
-            await dispatch(updateSpace(space.id, {title: name.trim(), description: description.trim()}));
-            onClose();
+            // Props replace wholesale server-side, so merge onto the live map to
+            // avoid dropping keys this UI doesn't manage.
+            const props = {...liveSpace.props, [SPACE_PROP_DEFAULT_PAGE_ID]: landingPageId};
+            await dispatch(updateSpace(space.id, {title: name.trim(), description: description.trim(), props}));
         } catch (err) {
-            setSaving(false);
             setError(err instanceof Error ? err.message : String(err));
+        } finally {
+            setSaving(false);
         }
     };
 
-    return {name, setName, description, setDescription, error, canSave, save};
+    const reset = () => {
+        setName(liveSpace.title);
+        setDescription(liveSpace.description ?? '');
+        setLandingPageId(savedLandingPageId);
+        setError(undefined);
+    };
+
+    return {name, setName, description, setDescription, landingPageId, setLandingPageId, error, dirty, canSave, saving, save, reset};
 }
 
 const InfoTab = ({space, info, url}: {space: Space; info: InfoTabState; url: string}) => {
     const {formatMessage} = useIntl();
 
+    // The landing-page options need the space's pages, which aren't guaranteed
+    // loaded when settings is opened from outside the space view.
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        dispatch(fetchPages(space.id));
+    }, [dispatch, space.id]);
+
+    const pages = useAppSelector((state) => getPagesForSpace(state, space.id));
+
+    const landingPageOptions: SelectOption[] = useMemo(() => [
+        {
+            value: '',
+            label: formatMessage({id: 'docs.spaceSettings.info.landingSpaceHome', defaultMessage: 'Space home'}),
+            leadingIcon: <HomeVariantOutlineIcon size={16}/>,
+        },
+        ...pages.map((page) => ({
+            value: page.id,
+            label: page.title,
+            leadingIcon: <FileTextOutlineIcon size={16}/>,
+        })),
+    ], [pages, formatMessage]);
+
     return (
-        <>
-            <h2 className={styles.heading}>
+        <Section
+            title={(
                 <FormattedMessage
                     id='docs.spaceSettings.info.heading'
                     defaultMessage='Space info'
                 />
-            </h2>
-
-            <TextInput
-                id='docs-space-settings-name'
-                label={formatMessage({id: 'docs.spaceSettings.info.nameLabel', defaultMessage: 'Space name'})}
-                value={info.name}
-                onChange={info.setName}
-                maxLength={64}
-                leading={(
-                    <SpaceIcon
-                        space={space}
-                        size={18}
-                    />
-                )}
-            />
-
-            <div className={styles.fieldLabel}>
-                <FormattedMessage
-                    id='docs.spaceSettings.info.urlLabel'
-                    defaultMessage='Space URL'
+            )}
+        >
+            <div className={styles.field}>
+                <TextInput
+                    id='docs-space-settings-name'
+                    label={formatMessage({id: 'docs.spaceSettings.info.nameLabel', defaultMessage: 'Space name'})}
+                    value={info.name}
+                    onChange={info.setName}
+                    maxLength={64}
+                    leading={(
+                        <SpaceIcon
+                            space={space}
+                            size={18}
+                        />
+                    )}
                 />
+                <div className={styles.urlRow}>
+                    <span className={styles.helper}>
+                        <FormattedMessage
+                            id='docs.spaceSettings.info.urlLabel'
+                            defaultMessage='Space URL'
+                        />
+                    </span>
+                    <span className={styles.urlText}>{url}</span>
+                    <Button
+                        emphasis='quaternary'
+                        size='xs'
+                        disabled={true}
+                        className={styles.inlineButton}
+                    >
+                        <FormattedMessage
+                            id='docs.spaceSettings.info.editUrl'
+                            defaultMessage='Edit'
+                        />
+                    </Button>
+                </div>
             </div>
-            <div className={styles.urlRow}>
-                <span className={styles.urlText}>{url}</span>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    disabled={true}
-                    aria-disabled={true}
-                >
+
+            <div className={styles.field}>
+                <span className={styles.fieldLabel}>
                     <FormattedMessage
-                        id='docs.spaceSettings.info.editUrl'
-                        defaultMessage='Edit'
+                        id='docs.spaceSettings.info.descriptionLabel'
+                        defaultMessage='Description'
                     />
-                </Button>
-            </div>
-
-            <div className={styles.fieldLabel}>
-                <FormattedMessage
-                    id='docs.spaceSettings.info.descriptionLabel'
-                    defaultMessage='Description'
-                />
-            </div>
-            <TextArea
-                id='docs-space-settings-description'
-                label={formatMessage({id: 'docs.spaceSettings.info.descriptionPlaceholder', defaultMessage: 'Enter a description for this space…'})}
-                value={info.description}
-                onChange={info.setDescription}
-                maxLength={1024}
-                rows={3}
-            />
-            <div className={styles.helper}>
-                <FormattedMessage
-                    id='docs.spaceSettings.info.descriptionHelper'
-                    defaultMessage='Describe how this space should be used. This will show when browsing spaces.'
+                </span>
+                <TextArea
+                    id='docs-space-settings-description'
+                    label={formatMessage({id: 'docs.spaceSettings.info.descriptionPlaceholder', defaultMessage: 'Enter a description for this space…'})}
+                    value={info.description}
+                    onChange={info.setDescription}
+                    maxLength={1024}
+                    rows={3}
                 />
+                <p className={styles.helper}>
+                    <FormattedMessage
+                        id='docs.spaceSettings.info.descriptionHelper'
+                        defaultMessage='Describe how this space should be used. This will show when browsing spaces.'
+                    />
+                </p>
             </div>
 
-            <div className={styles.fieldLabel}>
-                <FormattedMessage
-                    id='docs.spaceSettings.info.landingLabel'
-                    defaultMessage='Default landing page'
-                />
-            </div>
-            <Button
-                type='button'
-                emphasis='quaternary'
-                size='sm'
-                disabled={true}
-                aria-disabled={true}
-                className={styles.selectStub}
-            >
-                <span className={styles.selectStubLabel}>
-                    <SpaceIcon
-                        space={space}
-                        size={16}
-                    />
-                    {space.title}
-                </span>
-                <ChevronDownIcon size={16}/>
-            </Button>
+            <Select
+                id='docs-space-settings-landing-page'
+                label={formatMessage({id: 'docs.spaceSettings.info.landingLabel', defaultMessage: 'Default landing page'})}
+                value={info.landingPageId}
+                options={landingPageOptions}
+                onChange={info.setLandingPageId}
+            />
 
             {info.error && <div className={styles.error}>{info.error}</div>}
-        </>
+        </Section>
     );
 };
 
@@ -325,165 +399,166 @@ const PermissionsTab = ({space}: {space: Space}) => {
 
     return (
         <>
-            <h2 className={styles.heading}>
-                <FormattedMessage
-                    id='docs.spaceSettings.permissions.accessHeading'
-                    defaultMessage='Space access'
+            <Section
+                title={(
+                    <FormattedMessage
+                        id='docs.spaceSettings.permissions.accessHeading'
+                        defaultMessage='Space access'
+                    />
+                )}
+            >
+                <PublicPrivateSelector
+                    ariaLabel={formatMessage({id: 'docs.spaceSettings.permissions.accessLabel', defaultMessage: 'Space access'})}
+                    options={accessOptions}
+                    value='public'
+                    onChange={() => {}}
                 />
-            </h2>
-            <PublicPrivateSelector
-                ariaLabel={formatMessage({id: 'docs.spaceSettings.permissions.accessLabel', defaultMessage: 'Space access'})}
-                options={accessOptions}
-                value='public'
-                onChange={() => {}}
-            />
+            </Section>
 
-            <h2 className={styles.heading}>
-                <FormattedMessage
-                    id='docs.spaceSettings.permissions.peopleHeading'
-                    defaultMessage='People and groups with access'
-                />
-            </h2>
-            <div
-                className={styles.searchStub}
-                aria-disabled={true}
+            <Section
+                title={(
+                    <FormattedMessage
+                        id='docs.spaceSettings.permissions.peopleHeading'
+                        defaultMessage='People and groups with access'
+                    />
+                )}
             >
-                <FormattedMessage
-                    id='docs.spaceSettings.permissions.searchPlaceholder'
-                    defaultMessage='Add people, groups or channels'
-                />
-            </div>
-            <div className={styles.memberList}>
-                {members.map((member) => (
-                    <div
-                        key={member.id}
-                        className={styles.memberRow}
-                    >
-                        <Avatar
-                            url={member.avatarUrl}
-                            username={member.username}
-                            size='md'
-                            name=''
-                        />
-                        <span className={styles.memberInfo}>
-                            <span className={styles.memberName}>{member.displayName}</span>
-                            {member.username && (
-                                <span className={styles.memberUsername}>
-                                    <FormattedMessage
-                                        id='docs.spaceSettings.permissions.handle'
-                                        defaultMessage='@{username}'
-                                        values={{username: member.username}}
-                                    />
-                                </span>
-                            )}
-                        </span>
-                        <Button
-                            type='button'
-                            emphasis='quaternary'
-                            size='sm'
-                            disabled={true}
-                            aria-disabled={true}
-                            className={styles.roleTrigger}
+                <div
+                    className={styles.search}
+                    aria-disabled={true}
+                >
+                    <span className={styles.mutedIcon}>
+                        <MagnifyIcon size={16}/>
+                    </span>
+                    <FormattedMessage
+                        id='docs.spaceSettings.permissions.searchPlaceholder'
+                        defaultMessage='Add people, groups or channels'
+                    />
+                </div>
+                <div className={styles.memberList}>
+                    {members.map((member) => (
+                        <div
+                            key={member.id}
+                            className={styles.memberRow}
                         >
-                            <FormattedMessage
-                                id='docs.spaceSettings.permissions.role.admin'
-                                defaultMessage='Admin'
+                            <Avatar
+                                url={member.avatarUrl}
+                                username={member.username}
+                                size='sm'
+                                name=''
                             />
-                            <ChevronDownIcon size={16}/>
-                        </Button>
-                    </div>
-                ))}
-            </div>
+                            <span className={styles.memberInfo}>
+                                <span className={styles.memberName}>{member.displayName}</span>
+                                {member.username && (
+                                    <span className={styles.memberUsername}>
+                                        <FormattedMessage
+                                            id='docs.spaceSettings.permissions.handle'
+                                            defaultMessage='@{username}'
+                                            values={{username: member.username}}
+                                        />
+                                    </span>
+                                )}
+                            </span>
+                            <span
+                                className={styles.roleTrigger}
+                                aria-disabled={true}
+                            >
+                                <FormattedMessage
+                                    id='docs.spaceSettings.permissions.role.admin'
+                                    defaultMessage='Admin'
+                                />
+                                <ChevronDownIcon size={12}/>
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            </Section>
 
-            <div className={styles.toggleRow}>
-                <span className={styles.toggleText}>
-                    <span className={styles.toggleTitle}>
-                        <FormattedMessage
-                            id='docs.spaceSettings.permissions.externalSharing.title'
-                            defaultMessage='External sharing'
-                        />
+            <section className={styles.section}>
+                <div className={styles.toggleRow}>
+                    <span className={styles.toggleText}>
+                        <span className={styles.toggleTitle}>
+                            <FormattedMessage
+                                id='docs.spaceSettings.permissions.externalSharing.title'
+                                defaultMessage='External sharing'
+                            />
+                        </span>
+                        <span className={styles.helper}>
+                            <FormattedMessage
+                                id='docs.spaceSettings.permissions.externalSharing.description'
+                                defaultMessage='Let people outside the team access this space with a link.'
+                            />
+                        </span>
                     </span>
-                    <span className={styles.helper}>
+                    <span className={styles.comingSoonPill}>
                         <FormattedMessage
-                            id='docs.spaceSettings.permissions.externalSharing.description'
-                            defaultMessage='Let people outside the team access this space with a link.'
+                            id='docs.spaceSettings.permissions.externalSharing.comingSoon'
+                            defaultMessage='Coming soon'
                         />
                     </span>
-                </span>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    disabled={true}
-                    aria-disabled={true}
-                >
-                    <FormattedMessage
-                        id='docs.spaceSettings.permissions.externalSharing.comingSoon'
-                        defaultMessage='Coming soon'
-                    />
-                </Button>
-            </div>
+                </div>
+            </section>
         </>
     );
 };
 
 const ConfigurationTab = () => (
-    <>
-        <h2 className={styles.heading}>
+    <Section
+        title={(
             <FormattedMessage
                 id='docs.spaceSettings.configuration.heading'
                 defaultMessage='Configuration'
             />
-        </h2>
-        <p className={styles.comingSoon}>
+        )}
+    >
+        <p className={styles.copy}>
             <FormattedMessage
                 id='docs.spaceSettings.configuration.comingSoon'
                 defaultMessage='Space configuration options are coming soon.'
             />
         </p>
-    </>
+    </Section>
 );
 
 const ArchiveTab = ({space, onClose}: {space: Space; onClose: () => void}) => {
     const {formatMessage} = useIntl();
     const dispatch = useAppDispatch();
     const {goHome} = useDocsNavigation();
-    const [confirming, setConfirming] = useState(false);
     const [error, setError] = useState<string>();
+    const [confirming, setConfirming] = useState(false);
 
-    const archive = async () => {
+    const confirmArchive = async () => {
         setError(undefined);
         try {
             await dispatch(deleteSpace(space.id));
-            setConfirming(false);
             onClose();
             goHome();
         } catch (err) {
-            setConfirming(false);
             setError(err instanceof Error ? err.message : String(err));
         }
+        setConfirming(false);
     };
 
     return (
-        <>
-            <h2 className={styles.heading}>
+        <Section
+            title={(
                 <FormattedMessage
                     id='docs.spaceSettings.archive.heading'
                     defaultMessage='Archive space'
                 />
-            </h2>
+            )}
+        >
             <div className={styles.archiveCard}>
-                <p className={styles.archiveCopy}>
+                <p className={styles.copy}>
                     <FormattedMessage
                         id='docs.spaceSettings.archive.copy'
                         defaultMessage='Archiving removes this space and its pages from the team. Members will lose access. You can ask an admin to restore it later.'
                     />
                 </p>
                 <DestructiveButton
-                    type='button'
+                    leadingIcon={<ArchiveOutlineIcon size={16}/>}
                     onClick={() => setConfirming(true)}
                 >
-                    <ArchiveOutlineIcon size={16}/>
                     <FormattedMessage
                         id='docs.spaceSettings.archive.button'
                         defaultMessage='Archive space'
@@ -492,12 +567,15 @@ const ArchiveTab = ({space, onClose}: {space: Space; onClose: () => void}) => {
                 {error && <div className={styles.error}>{error}</div>}
             </div>
 
+            {/* Rendered inside this modal's tree (not through the modal
+                controller, which mounts at the app root) so Base UI sees it as a
+                nested dialog and stacks it over the settings modal. */}
             {confirming && (
                 <ConfirmModal
                     isConfirmDestructive={true}
                     title={formatMessage({id: 'docs.spaceSettings.archive.confirmTitle', defaultMessage: 'Archive this space?'})}
                     confirmButtonText={formatMessage({id: 'docs.spaceSettings.archive.confirmButton', defaultMessage: 'Archive'})}
-                    onConfirm={archive}
+                    onConfirm={confirmArchive}
                     onCancel={() => setConfirming(false)}
                 >
                     <FormattedMessage
@@ -507,7 +585,7 @@ const ArchiveTab = ({space, onClose}: {space: Space; onClose: () => void}) => {
                     />
                 </ConfirmModal>
             )}
-        </>
+        </Section>
     );
 };
 
diff --git a/webapp/src/components/space_view/member_avatars.module.scss b/webapp/src/components/space_view/member_avatars.module.scss
index 07195ac..f339664 100644
--- a/webapp/src/components/space_view/member_avatars.module.scss
+++ b/webapp/src/components/space_view/member_avatars.module.scss
@@ -13,6 +13,25 @@
     }
 }
 
+.label {
+    display: flex;
+    flex-direction: column;
+}
+
+.labelList {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.labelName {
+    font-weight: 600;
+}
+
+.labelUsername {
+    opacity: 0.72;
+}
+
 .overflow {
     display: inline-flex;
     align-items: center;
diff --git a/webapp/src/components/space_view/member_avatars.tsx b/webapp/src/components/space_view/member_avatars.tsx
index 5130162..4ba7858 100644
--- a/webapp/src/components/space_view/member_avatars.tsx
+++ b/webapp/src/components/space_view/member_avatars.tsx
@@ -1,15 +1,32 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useSpaceMemberProfiles} from 'hooks/members';
+import {type MemberProfile, useSpaceMemberProfiles} from 'hooks/members';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Avatar} from 'webapp_globals';
 
+import {WithTooltip} from '@mattermost/shared/components/tooltip';
+
 import styles from './member_avatars.module.scss';
 
 const MAX_SHOWN = 3;
 
+const MemberLabel = ({member}: {member: MemberProfile}) => (
+    <span className={styles.label}>
+        <span className={styles.labelName}>{member.displayName}</span>
+        {member.username && member.username !== member.displayName && (
+            <span className={styles.labelUsername}>
+                <FormattedMessage
+                    id='docs.space.memberHandle'
+                    defaultMessage='@{username}'
+                    values={{username: member.username}}
+                />
+            </span>
+        )}
+    </span>
+);
+
 // Overlapping avatar stack for a space's members, with a "+N" overflow. Renders
 // nothing when there are no members (Avatar itself no-ops on hosts without it).
 const MemberAvatars = ({spaceId}: {spaceId: string}) => {
@@ -20,32 +37,50 @@ const MemberAvatars = ({spaceId}: {spaceId: string}) => {
     }
 
     const shown = members.slice(0, MAX_SHOWN);
-    const overflow = members.length - shown.length;
+    const hidden = members.slice(shown.length);
 
     return (
         <div className={styles.stack}>
             {shown.map((member) => (
-                <span
+                <WithTooltip
                     key={member.id}
-                    className={styles.avatar}
-                    title={member.displayName}
+                    title={<MemberLabel member={member}/>}
                 >
-                    <Avatar
-                        url={member.avatarUrl}
-                        username={member.username}
-                        size='sm'
-                        name=''
-                    />
-                </span>
+                    <span
+                        className={styles.avatar}
+                        role='img'
+                        aria-label={member.displayName}
+                    >
+                        <Avatar
+                            url={member.avatarUrl}
+                            username={member.username}
+                            size='sm'
+                            name=''
+                        />
+                    </span>
+                </WithTooltip>
             ))}
-            {overflow > 0 && (
-                <span className={styles.overflow}>
-                    <FormattedMessage
-                        id='docs.space.membersOverflow'
-                        defaultMessage='+{count}'
-                        values={{count: overflow}}
-                    />
-                </span>
+            {hidden.length > 0 && (
+                <WithTooltip
+                    title={
+                        <span className={styles.labelList}>
+                            {hidden.map((member) => (
+                                <MemberLabel
+                                    key={member.id}
+                                    member={member}
+                                />
+                            ))}
+                        </span>
+                    }
+                >
+                    <span className={styles.overflow}>
+                        <FormattedMessage
+                            id='docs.space.membersOverflow'
+                            defaultMessage='+{count}'
+                            values={{count: hidden.length}}
+                        />
+                    </span>
+                </WithTooltip>
             )}
         </div>
     );
diff --git a/webapp/src/components/space_view/page_content/page_content.module.scss b/webapp/src/components/space_view/page_content/page_content.module.scss
new file mode 100644
index 0000000..76f76a7
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_content.module.scss
@@ -0,0 +1,95 @@
+.frame {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    padding: 0 56px;
+}
+
+.article {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 32px;
+    min-width: 280px;
+    max-width: 700px;
+    padding-bottom: 80px;
+}
+
+.titleArea {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 32px 0 24px;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+
+    &:hover .topActions,
+    &:focus-within .topActions {
+        opacity: 1;
+    }
+}
+
+// Sits in the title's top padding; hidden until the title area is hovered.
+.topActions {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity 150ms ease;
+}
+
+// Scoped under `.btn.btn-xs` to beat core's quaternary button color/padding.
+.topAction:global(.btn.btn-xs) {
+    height: auto;
+    gap: 4px;
+    padding: 4px 8px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+}
+
+.title {
+    margin: 0;
+    overflow-wrap: break-word;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 36px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 44px;
+}
+
+.titleUntitled {
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+}
+
+.metadata {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px;
+}
+
+// The design's "Input Chip": a compact, borderless pill of page metadata.
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px 4px 8px;
+    border-radius: 4px;
+    color: var(--center-channel-color);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    white-space: nowrap;
+}
+
+.chipAvatar {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+}
diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
new file mode 100644
index 0000000..2a5664f
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -0,0 +1,97 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import {useUserProfile} from 'hooks/members';
+import {useAppSelector} from 'hooks/redux';
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {Avatar} from 'webapp_globals';
+
+import EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';
+import ImageOutlineIcon from '@mattermost/compass-icons/components/image-outline';
+
+import {getPage} from 'store/selectors';
+
+import {Button} from 'components/form_controls/button';
+
+import type {Page} from 'types/docs';
+
+import styles from './page_content.module.scss';
+import PageContentPlaceholder from './page_content_placeholder';
+
+type Props = {
+    pageId: string;
+};
+
+// The selected page's content column: a title area over the page body. The body
+// is a skeleton until the editor is mounted, which also covers the window where
+// the routed page hasn't arrived in the store yet (no title to show).
+const PageContent = ({pageId}: Props) => {
+    const page = useAppSelector((state) => getPage(state, pageId));
+
+    return (
+        <div className={styles.frame}>
+            <article className={styles.article}>
+                {page && <PageTitleArea page={page}/>}
+                <PageContentPlaceholder/>
+            </article>
+        </div>
+    );
+};
+
+// Title, byline, and the decoration actions that reveal on hover. Adding an
+// emoji or a header image needs page props the editor work will bring, so those
+// two are affordances only for now.
+const PageTitleArea = ({page}: {page: Page}) => {
+    const {formatMessage} = useIntl();
+    const author = useUserProfile(page.user_id);
+
+    return (
+        <header className={styles.titleArea}>
+            <div className={styles.topActions}>
+                <Button
+                    emphasis='quaternary'
+                    size='xs'
+                    className={styles.topAction}
+                    leadingIcon={<EmoticonPlusOutlineIcon size={12}/>}
+                >
+                    {formatMessage({id: 'docs.page.addEmoji', defaultMessage: 'Add emoji'})}
+                </Button>
+                <Button
+                    emphasis='quaternary'
+                    size='xs'
+                    className={styles.topAction}
+                    leadingIcon={<ImageOutlineIcon size={12}/>}
+                >
+                    {formatMessage({id: 'docs.page.headerImage', defaultMessage: 'Header image'})}
+                </Button>
+            </div>
+
+            <h1 className={classNames(styles.title, {[styles.titleUntitled]: !page.title})}>
+                {page.title || formatMessage({id: 'docs.page.untitled', defaultMessage: 'Untitled'})}
+            </h1>
+
+            {author?.displayName && (
+                <div className={styles.metadata}>
+                    <span className={styles.chip}>
+                        <span
+                            className={styles.chipAvatar}
+                            aria-hidden={true}
+                        >
+                            <Avatar
+                                url={author.avatarUrl}
+                                username={author.username}
+                                size='xxs'
+                                name=''
+                            />
+                        </span>
+                        {formatMessage({id: 'docs.page.byAuthor', defaultMessage: 'By {name}'}, {name: author.displayName})}
+                    </span>
+                </div>
+            )}
+        </header>
+    );
+};
+
+export default PageContent;
diff --git a/webapp/src/components/space_view/page_content/page_content_placeholder.module.scss b/webapp/src/components/space_view/page_content/page_content_placeholder.module.scss
new file mode 100644
index 0000000..4b2810b
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_content_placeholder.module.scss
@@ -0,0 +1,37 @@
+// Stand-in for the not-yet-mounted editor: a full-height block of muted bars
+// that reads as a content skeleton rather than an empty gap.
+.placeholder {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 240px;
+    padding: 4px 0 40px;
+}
+
+.block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.block + .block {
+    margin-top: 12px;
+}
+
+.heading,
+.line {
+    height: 12px;
+    border-radius: 4px;
+    background: rgba(var(--center-channel-color-rgb), 0.08);
+}
+
+.heading {
+    width: 40%;
+    height: 20px;
+    background: rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+.lineShort {
+    width: 62%;
+}
diff --git a/webapp/src/components/space_view/page_content/page_content_placeholder.tsx b/webapp/src/components/space_view/page_content/page_content_placeholder.tsx
new file mode 100644
index 0000000..d07bca9
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_content_placeholder.tsx
@@ -0,0 +1,36 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from './page_content_placeholder.module.scss';
+
+const BLOCKS = [3, 2, 3];
+
+// Fills the content column while the editor is unavailable. Purely decorative —
+// it becomes the content-loading skeleton once page bodies are fetched, so it
+// carries no text for screen readers to announce.
+const PageContentPlaceholder = () => (
+    <div
+        className={styles.placeholder}
+        aria-hidden={true}
+    >
+        {BLOCKS.map((lines, blockIndex) => (
+            <div
+                key={blockIndex}
+                className={styles.block}
+            >
+                <div className={styles.heading}/>
+                {Array.from({length: lines}, (_, lineIndex) => (
+                    <div
+                        key={lineIndex}
+                        className={classNames(styles.line, {[styles.lineShort]: lineIndex === lines - 1})}
+                    />
+                ))}
+            </div>
+        ))}
+    </div>
+);
+
+export default PageContentPlaceholder;
diff --git a/webapp/src/components/space_view/page_header.module.scss b/webapp/src/components/space_view/page_header.module.scss
index a1510dd..268f22e 100644
--- a/webapp/src/components/space_view/page_header.module.scss
+++ b/webapp/src/components/space_view/page_header.module.scss
@@ -5,15 +5,27 @@
     height: 52px;
     padding: 0 12px 0 8px;
     background: var(--center-channel-bg);
+
+    // Core's global `.btn + .btn { margin-left: 8px }` keys off DOM adjacency and
+    // toggles as Base UI mounts focus guards around an open menu trigger, which
+    // made the dot-menu button jump/shrink on open. Spacing comes from `gap`.
+    :global(.btn + .btn) {
+        margin-left: 0;
+    }
 }
 
+// Spans the pages sidebar while it's open (width set inline from the shared
+// sidebar width) so the add-page button lands on the sidebar's right edge.
+// Shrinkable with a cap, so a wide sidebar can't crowd the page controls.
 .left {
     display: flex;
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     min-width: 0;
+    max-width: 50%;
     align-items: center;
 }
 
+// Sits at the bar's right edge; a <Spacer/> before it absorbs the free space.
 .right {
     display: flex;
     flex-shrink: 0;
@@ -21,8 +33,9 @@
     gap: 4px;
 }
 
-.pagesToggle {
-    gap: 8px;
+.iconLabel {
+    gap: 6px;
+    padding: 0 8px;
 }
 
 .pagesLabel {
@@ -38,21 +51,3 @@
     white-space: nowrap;
 }
 
-.commentButton {
-    position: relative;
-}
-
-.badge {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 8px;
-    height: 8px;
-    border: 2px solid var(--center-channel-bg);
-    border-radius: 50%;
-    background: var(--button-bg);
-}
-
-.edit {
-    gap: 6px;
-}
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 8f6c7c4..43af951 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -2,6 +2,8 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
+import {useCreateRootPage} from 'hooks/pages';
+import {useSidebarWidth} from 'hooks/sidebar_width';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {Timestamp} from 'webapp_globals';
@@ -12,12 +14,24 @@ import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizo
 import FormatListBulletedIcon from '@mattermost/compass-icons/components/format-list-bulleted';
 import MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';
 import PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';
+import PlusIcon from '@mattermost/compass-icons/components/plus';
 
 import {Button} from 'components/form_controls/button';
+import PageMenu from 'components/page_menu/page_menu';
+import Spacer from 'components/spacer/spacer';
 
-import type {Space} from 'types/docs';
+import type {Page, Space} from 'types/docs';
 
 import styles from './page_header.module.scss';
+import {DEFAULT_SIDEBAR_WIDTH} from './sidebar/sidebar';
+
+// The pages toggle doubles as the accessible label for the page tree section;
+// the tree references it via aria-labelledby.
+export const PAGES_SECTION_LABEL_ID = 'docsPagesToggle';
+
+// Mirrors `.bar`'s inline-start padding, which the pages cluster has to discount
+// from the sidebar width to land on the sidebar's right edge.
+const BAR_INLINE_START_PADDING = 8;
 
 // Relative "Updated …" buckets for the host Timestamp.
 const UPDATED_TIME_SPEC: TimestampUnit[] = [
@@ -30,45 +44,61 @@ const UPDATED_TIME_SPEC: TimestampUnit[] = [
 
 type Props = {
     space: Space;
+
+    // The routed page, when one is selected. Drives the "Updated" timestamp and
+    // the page-scoped controls; on the space home (no page) only the space's
+    // last-updated time shows.
+    page?: Page;
     treeOpen: boolean;
     onTogglePages: () => void;
 };
 
-// Controls (comments, edit, overflow, expand) are visual scaffolding wired in
-// later passes; the pages toggle drives the page tree panel.
-const PageHeader = ({space, treeOpen, onTogglePages}: Props) => {
+// Page controls (comments, edit, overflow, expand) are visual scaffolding wired
+// in later passes; the pages toggle drives the page tree panel.
+const PageHeader = ({space, page, treeOpen, onTogglePages}: Props) => {
     const {formatMessage} = useIntl();
+    const createRootPage = useCreateRootPage(space.id);
 
-    const pagesLabel = formatMessage({id: 'docs.space.pages.toggle', defaultMessage: 'Toggle page tree'});
+    // Read-only view of the pages sidebar's live width, so the add-page button
+    // can sit on its right edge (shared store, no prop threading).
+    const {width: sidebarWidth} = useSidebarWidth('pages', DEFAULT_SIDEBAR_WIDTH);
+
+    const addPageLabel = formatMessage({id: 'docs.pageTree.add', defaultMessage: 'Add page'});
     const commentsLabel = formatMessage({id: 'docs.space.comments', defaultMessage: 'Comments'});
     const moreLabel = formatMessage({id: 'docs.space.more', defaultMessage: 'More actions'});
     const expandLabel = formatMessage({id: 'docs.space.expand', defaultMessage: 'Expand'});
 
+    // The current page's last-updated time when a page is open, otherwise the
+    // space's.
+    const updatedAt = page ? page.update_at : space.update_at;
+
     // Timestamp's `style` is a narrow/short/long format variant, not a DOM style object.
     /* eslint-disable react/style-prop-object */
-    const updatedRelative = Timestamp ? (
+    const updatedRelative = (
         <Timestamp
-            value={space.update_at}
+            value={updatedAt}
             units={UPDATED_TIME_SPEC}
             useTime={false}
             style='narrow'
         />
-    ) : null;
+    );
     /* eslint-enable react/style-prop-object */
 
     return (
         <div className={styles.bar}>
-            <div className={styles.left}>
+            <div
+                className={styles.left}
+                style={treeOpen ? {width: sidebarWidth - BAR_INLINE_START_PADDING} : undefined}
+            >
                 <Button
-                    type='button'
+                    id={PAGES_SECTION_LABEL_ID}
                     emphasis='quaternary'
                     size='sm'
-                    className={classNames('docs-btn-neutral', styles.pagesToggle)}
-                    aria-label={pagesLabel}
+                    className={classNames('docs-btn-neutral', styles.iconLabel, {active: treeOpen})}
                     aria-pressed={treeOpen}
+                    leadingIcon={<FormatListBulletedIcon size={18}/>}
                     onClick={onTogglePages}
                 >
-                    <FormatListBulletedIcon size={18}/>
                     <span className={styles.pagesLabel}>
                         <FormattedMessage
                             id='docs.space.pages'
@@ -76,58 +106,75 @@ const PageHeader = ({space, treeOpen, onTogglePages}: Props) => {
                         />
                     </span>
                 </Button>
+                {treeOpen && <Spacer/>}
+                {treeOpen && (
+                    <Button
+                        emphasis='quaternary'
+                        size='sm'
+                        className='btn-icon'
+                        tooltip={addPageLabel}
+                        leadingIcon={<PlusIcon size={18}/>}
+                        onClick={createRootPage}
+                    />
+                )}
             </div>
 
+            <Spacer/>
+
             <div className={styles.right}>
-                {updatedRelative && (
-                    <span className={styles.updated}>
-                        <FormattedMessage
-                            id='docs.space.updated'
-                            defaultMessage='Updated {relative}'
-                            values={{relative: updatedRelative}}
-                        />
-                    </span>
-                )}
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className={classNames('btn-icon', styles.commentButton)}
-                    aria-label={commentsLabel}
-                >
-                    <MessageTextOutlineIcon size={18}/>
-                    <span className={styles.badge}/>
-                </Button>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className={classNames('docs-btn-neutral', styles.edit)}
-                >
-                    <PencilOutlineIcon size={18}/>
+                <span className={styles.updated}>
                     <FormattedMessage
-                        id='docs.space.edit'
-                        defaultMessage='Edit'
+                        id='docs.space.updated'
+                        defaultMessage='Updated {relative}'
+                        values={{relative: updatedRelative}}
                     />
-                </Button>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className='btn-icon'
-                    aria-label={moreLabel}
-                >
-                    <DotsHorizontalIcon size={18}/>
-                </Button>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className='btn-icon'
-                    aria-label={expandLabel}
-                >
-                    <ArrowExpandIcon size={18}/>
-                </Button>
+                </span>
+                {page && (
+                    <>
+                        <Button
+                            emphasis='quaternary'
+                            size='sm'
+                            className='btn-icon'
+                            badge={true}
+                            tooltip={commentsLabel}
+                            leadingIcon={<MessageTextOutlineIcon size={18}/>}
+                        />
+                        <Button
+                            emphasis='quaternary'
+                            size='sm'
+                            className={classNames('docs-btn-neutral', styles.iconLabel)}
+                            leadingIcon={<PencilOutlineIcon size={18}/>}
+                        >
+                            <FormattedMessage
+                                id='docs.space.edit'
+                                defaultMessage='Edit'
+                            />
+                        </Button>
+                        <PageMenu
+                            spaceId={space.id}
+                            pageId={page.id}
+                            pageTitle={page.title}
+                            align='right'
+                            tooltip={moreLabel}
+                            trigger={(
+                                <Button
+                                    emphasis='quaternary'
+                                    size='sm'
+                                    className='btn-icon'
+                                    aria-label={moreLabel}
+                                    leadingIcon={<DotsHorizontalIcon size={18}/>}
+                                />
+                            )}
+                        />
+                        <Button
+                            emphasis='quaternary'
+                            size='sm'
+                            className='btn-icon'
+                            tooltip={expandLabel}
+                            leadingIcon={<ArrowExpandIcon size={18}/>}
+                        />
+                    </>
+                )}
             </div>
         </div>
     );
diff --git a/webapp/src/components/space_view/page_hero.module.scss b/webapp/src/components/space_view/page_hero.module.scss
index 5454999..2209304 100644
--- a/webapp/src/components/space_view/page_hero.module.scss
+++ b/webapp/src/components/space_view/page_hero.module.scss
@@ -65,10 +65,6 @@
     border-right: none;
 }
 
-.avatars {
-    margin-left: auto;
-}
-
 .statValue {
     color: var(--center-channel-color);
     font-size: 20px;
diff --git a/webapp/src/components/space_view/page_hero.tsx b/webapp/src/components/space_view/page_hero.tsx
index 8699b4c..886f178 100644
--- a/webapp/src/components/space_view/page_hero.tsx
+++ b/webapp/src/components/space_view/page_hero.tsx
@@ -6,6 +6,8 @@ import React from 'react';
 import {useIntl} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
 
+import Spacer from 'components/spacer/spacer';
+
 import type {Space} from 'types/docs';
 
 import MemberAvatars from './member_avatars';
@@ -69,9 +71,8 @@ const PageHero = ({space, pageCount, memberCount}: Props) => {
                         <span className={styles.statLabel}>{stat.label}</span>
                     </div>
                 ))}
-                <div className={styles.avatars}>
-                    <MemberAvatars spaceId={space.id}/>
-                </div>
+                <Spacer/>
+                <MemberAvatars spaceId={space.id}/>
             </div>
         </section>
     );
diff --git a/webapp/src/components/space_view/page_tree/depth.ts b/webapp/src/components/space_view/page_tree/depth.ts
new file mode 100644
index 0000000..4ff19e1
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/depth.ts
@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {PageNode} from 'store/page_tree';
+
+// Hard cap on nesting: 10 levels total, so the deepest allowed node depth is 9.
+export const MAX_PAGE_LEVELS = 10;
+export const MAX_PAGE_DEPTH = MAX_PAGE_LEVELS - 1;
+
+// Maps each page id to the height of its subtree: the number of levels below it
+// (a leaf is 0). Backs the drag guard that rejects a move whose deepest
+// descendant would land past `MAX_PAGE_DEPTH`.
+export function buildSubtreeHeightMap(roots: PageNode[]): Map<string, number> {
+    const map = new Map<string, number>();
+
+    const measure = (node: PageNode): number => {
+        let height = 0;
+        for (const child of node.children) {
+            height = Math.max(height, measure(child) + 1);
+        }
+        map.set(node.page.id, height);
+        return height;
+    };
+
+    roots.forEach(measure);
+    return map;
+}
diff --git a/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts b/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
index 5e934de..01c8d99 100644
--- a/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
+++ b/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
@@ -3,6 +3,8 @@
 
 import {combine} from '@atlaskit/pragmatic-drag-and-drop/combine';
 import {draggable, dropTargetForElements} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {pointerOutsideOfPreview} from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import {setCustomNativeDragPreview} from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {useLatest} from 'hooks/utils';
 import {useEffect, useState} from 'react';
 
@@ -12,10 +14,11 @@ type Args = {
     pageId: string;
     element: HTMLElement | null;
 
-    // True when `sourcePageId` is allowed to drop on this row (guards against
-    // dropping a page into its own subtree). Read at drop time via a ref, so a
-    // changing predicate doesn't re-register the drag listeners.
-    canDrop: (sourcePageId: string) => boolean;
+    // True when `sourcePageId` is allowed to drop on this row in `mode` (guards
+    // against dropping a page into its own subtree, and against exceeding the
+    // nesting cap). Read at drop time via a ref, so a changing predicate doesn't
+    // re-register the drag listeners.
+    canDrop: (sourcePageId: string, mode: PageDropTarget['mode']) => boolean;
     enabled: boolean;
 };
 
@@ -35,9 +38,22 @@ function computeDropTarget(element: Element, clientY: number): PageDropTarget {
     return {mode: 'reparent'};
 }
 
+// Keeps the preview clear of the cursor so it never covers the row underneath,
+// which is the row the drop indicator is describing.
+const PREVIEW_OFFSET = {x: '12px', y: '8px'};
+
 export function usePageDragDrop({pageId, element, canDrop, enabled}: Args) {
     const [dragging, setDragging] = useState(false);
     const [dropTarget, setDropTarget] = useState<PageDropTarget | null>(null);
+
+    // Set while the browser is capturing the drag image: the caller portals its
+    // preview into this container instead of letting the row itself be snapshotted.
+    const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(null);
+
+    // True while a drag hovers this row in a position it cannot accept (dropping
+    // onto own descendant, or a move that would exceed the nesting cap). Drives
+    // the "not allowed" indicator; the move itself is still suppressed on drop.
+    const [blocked, setBlocked] = useState(false);
     const canDropRef = useLatest(canDrop);
 
     useEffect(() => {
@@ -49,21 +65,65 @@ export function usePageDragDrop({pageId, element, canDrop, enabled}: Args) {
             draggable({
                 element,
                 getInitialData: () => ({type: PAGE_DRAG_TYPE, pageId}),
+                onGenerateDragPreview: ({nativeSetDragImage}) => {
+                    setCustomNativeDragPreview({
+                        nativeSetDragImage,
+                        getOffset: pointerOutsideOfPreview(PREVIEW_OFFSET),
+                        render: ({container}) => {
+                            setPreviewContainer(container);
+                            return () => setPreviewContainer(null);
+                        },
+                    });
+                },
                 onDragStart: () => setDragging(true),
                 onDrop: () => setDragging(false),
             }),
             dropTargetForElements({
                 element,
-                getData: ({input, element: el}) => ({type: PAGE_DRAG_TYPE, pageId, ...computeDropTarget(el, input.clientY)}),
+
+                // `blocked` covers the mode the pointer currently sits in: the row
+                // may accept a reorder while rejecting a reparent, so the verdict
+                // travels with the data and suppresses both the indicator and the
+                // move itself (see `usePagesDnd`).
+                getData: ({input, element: el, source}) => {
+                    const target = computeDropTarget(el, input.clientY);
+                    return {
+                        type: PAGE_DRAG_TYPE,
+                        pageId,
+                        blocked: !canDropRef.current(source.data.pageId as string, target.mode),
+                        ...target,
+                    };
+                },
+
+                // Truthful: this row is a drop target only if the source can
+                // actually land here in at least one mode. `getData.blocked`
+                // then narrows it to the mode under the pointer, so a row that
+                // accepts a reorder but not a (cap-exceeding) reparent still
+                // shows the "not allowed" cue in its middle band.
                 canDrop: ({source}) => source.data.type === PAGE_DRAG_TYPE &&
                     source.data.pageId !== pageId &&
-                    canDropRef.current(source.data.pageId as string),
-                onDrag: ({self}) => setDropTarget({mode: self.data.mode, edge: self.data.edge} as PageDropTarget),
-                onDragLeave: () => setDropTarget(null),
-                onDrop: () => setDropTarget(null),
+                    (canDropRef.current(source.data.pageId as string, 'reorder') ||
+                        canDropRef.current(source.data.pageId as string, 'reparent')),
+                onDrag: ({self}) => {
+                    if (self.data.blocked) {
+                        setBlocked(true);
+                        setDropTarget(null);
+                    } else {
+                        setBlocked(false);
+                        setDropTarget({mode: self.data.mode, edge: self.data.edge} as PageDropTarget);
+                    }
+                },
+                onDragLeave: () => {
+                    setDropTarget(null);
+                    setBlocked(false);
+                },
+                onDrop: () => {
+                    setDropTarget(null);
+                    setBlocked(false);
+                },
             }),
         );
     }, [pageId, element, enabled, canDropRef]);
 
-    return {dragging, dropTarget};
+    return {dragging, dropTarget, blocked, previewContainer};
 }
diff --git a/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts b/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
index d125b6c..63842c4 100644
--- a/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
+++ b/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
@@ -3,7 +3,7 @@
 
 import {monitorForElements} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import {useLatest} from 'hooks/utils';
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 
 import type {Page} from 'types/docs';
 
@@ -58,11 +58,19 @@ export function usePagesDnd({pages, onMove, enabled}: Args) {
     const onMoveRef = useLatest(onMove);
     const enabledRef = useLatest(enabled);
 
+    // The page currently being dragged (null when idle). Lets rows mark
+    // themselves as an invalid drop zone when they sit inside the dragged
+    // page's own subtree.
+    const [draggingId, setDraggingId] = useState<string | null>(null);
+
     useEffect(() => monitorForElements({
         canMonitor: ({source}) => enabledRef.current && source.data.type === PAGE_DRAG_TYPE,
+        onDragStart: ({source}) => setDraggingId(source.data.pageId as string),
         onDrop: ({source, location}) => {
+            setDraggingId(null);
+
             const target = location.current.dropTargets[0];
-            if (!target || target.data.type !== PAGE_DRAG_TYPE) {
+            if (!target || target.data.type !== PAGE_DRAG_TYPE || target.data.blocked) {
                 return;
             }
 
@@ -76,4 +84,6 @@ export function usePagesDnd({pages, onMove, enabled}: Args) {
             }
         },
     }), [pagesRef, onMoveRef, enabledRef]);
+
+    return {draggingId};
 }
diff --git a/webapp/src/components/space_view/page_tree/page_drag_preview.module.scss b/webapp/src/components/space_view/page_tree/page_drag_preview.module.scss
new file mode 100644
index 0000000..28e9ca6
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_drag_preview.module.scss
@@ -0,0 +1,43 @@
+// Rendered into a detached container the browser snapshots as the drag image, so
+// it can't inherit the tree's width — the title's own max-width does the
+// truncating instead of the row's flex context.
+.preview {
+    display: flex;
+    max-width: 240px;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    background: var(--center-channel-bg);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+.icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+// Body 100 - Semibold, matching a page tree row's label.
+.title {
+    overflow: hidden;
+    min-width: 0;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.count {
+    flex-shrink: 0;
+    padding: 0 6px;
+    border-radius: 8px;
+    background: rgba(var(--center-channel-color-rgb), 0.08);
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 16px;
+}
diff --git a/webapp/src/components/space_view/page_tree/page_drag_preview.tsx b/webapp/src/components/space_view/page_tree/page_drag_preview.tsx
new file mode 100644
index 0000000..2f5b743
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_drag_preview.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';
+import FolderOutlineIcon from '@mattermost/compass-icons/components/folder-outline';
+
+import styles from './page_drag_preview.module.scss';
+
+type Props = {
+    title: string;
+    type: string;
+
+    // Direct children only: what rides along with the drag is the whole subtree,
+    // but the count communicates the move's shape without unbounded arithmetic.
+    childCount: number;
+};
+
+/**
+ * What follows the pointer while a page row is dragged. Deliberately not the row
+ * itself: the row's controls (disclosure toggle, overflow menu, favorite star)
+ * are affordances for a stationary row and mean nothing mid-drag.
+ */
+const PageDragPreview = ({title, type, childCount}: Props) => {
+    const Glyph = type === 'page_folder' ? FolderOutlineIcon : FileTextOutlineIcon;
+
+    return (
+        <div className={styles.preview}>
+            <span
+                className={styles.icon}
+                aria-hidden={true}
+            >
+                <Glyph size={16}/>
+            </span>
+            <span className={styles.title}>{title}</span>
+            {childCount > 0 && (
+                <span className={styles.count}>{childCount}</span>
+            )}
+        </div>
+    );
+};
+
+export default PageDragPreview;
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
index d6ee120..045bd8d 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
@@ -1,21 +1,39 @@
 .node {
     display: flex;
     flex-direction: column;
+    gap: 8px;
+    min-width: 0;
 }
 
+// The whole row is the click target, so it owns the only hover/selected state
+// in the tree; the chevron inside only tints itself. Nesting is applied as a
+// left margin (not padding) so the hitbox and its hover/selected background
+// start at the indentation rather than spanning the full panel width.
 .row {
     position: relative;
     display: flex;
+    min-height: 32px;
     align-items: center;
-    gap: 2px;
+    gap: 4px;
     min-width: 0;
-    padding-right: 4px;
+    padding-block: 2px;
+
+    // No inline-start padding: the chevron slot (always laid out, even for a leaf)
+    // supplies the row's left structure, and the panel's own padding keeps it off
+    // the panel edge.
+    padding-inline: 0 4px;
     border-radius: 4px;
+    cursor: pointer;
 
     &:hover {
         background: rgba(var(--center-channel-color-rgb), 0.08);
     }
 
+    &:focus-visible {
+        outline: 2px solid var(--button-bg);
+        outline-offset: -2px;
+    }
+
     &.active,
     &.active:hover {
         background: rgba(var(--button-bg-rgb), 0.08);
@@ -28,27 +46,43 @@
     &.reparent {
         box-shadow: inset 0 0 0 2px var(--button-bg);
     }
-}
 
-.chevron {
-    flex-shrink: 0;
+    // Hovered by a drag whose current position can't accept it (a reparent that
+    // would exceed the nesting cap): tint red and show a not-allowed cursor.
+    &.blocked {
+        background: rgba(var(--error-text-color-rgb), 0.08);
+        box-shadow: inset 0 0 0 2px var(--error-text);
+        cursor: not-allowed;
+    }
+
+    // Sits inside the dragged page's own subtree: never a valid drop, so fade it
+    // for the duration of the drag to signal the whole zone is off-limits.
+    &.invalidZone {
+        cursor: not-allowed;
+        opacity: 0.4;
+    }
 }
 
+// A leaf renders `.chevronSpacer` in the chevron's place so every row's icon —
+// parent or leaf, at any depth — lands on the same axis.
+.chevron,
 .chevronSpacer {
+    display: flex;
+    width: 16px;
+    height: 20px;
     flex-shrink: 0;
-    width: 24px;
-    height: 24px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
 }
 
-.label {
-    display: flex;
-    flex: 1 1 0;
-    gap: 6px;
-    align-items: center;
-    min-width: 0;
-    justify-content: flex-start;
-    padding: 4px 6px;
-    font-weight: 400;
+.chevron:hover {
+    background: rgba(var(--center-channel-color-rgb), 0.16);
+    color: var(--center-channel-color);
 }
 
 .icon {
@@ -58,20 +92,63 @@
     color: rgba(var(--center-channel-color-rgb), 0.64);
 }
 
-.active .icon {
+// Always visible (unlike the hover-only menu) so a favorited page is
+// identifiable at a glance while scanning the tree.
+.favorite {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--button-bg);
+}
+
+.active .icon,
+.active .title {
     color: var(--button-bg);
 }
 
+// Body 100 - Semibold
 .title {
     overflow: hidden;
+    min-width: 0;
     color: var(--center-channel-color);
     font-size: 14px;
+    font-weight: 600;
     line-height: 20px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+// Always laid out (only its opacity changes) so revealing it never shifts the row.
+.menuTrigger {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+    opacity: 0;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.16);
+        color: var(--center-channel-color);
+    }
+}
+
+.row:hover .menuTrigger,
+.row:focus-visible .menuTrigger,
+.active .menuTrigger,
+.menuTrigger[data-popup-open] {
+    opacity: 1;
+}
+
 .children {
     display: flex;
     flex-direction: column;
+    gap: 8px;
+    min-width: 0;
 }
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index 93c2a55..4bc9859 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -3,102 +3,239 @@
 
 import {DropIndicator} from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import classNames from 'classnames';
+import {useIsFavorite} from 'hooks/favorites';
+import {useTextOverflow} from 'hooks/text_overflow';
 import React, {useState} from 'react';
+import {createPortal} from 'react-dom';
 import {useIntl} from 'react-intl';
 
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
 import ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';
+import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';
 import FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';
 import FolderOutlineIcon from '@mattermost/compass-icons/components/folder-outline';
+import StarIcon from '@mattermost/compass-icons/components/star';
+import {WithTooltip} from '@mattermost/shared/components/tooltip';
 
 import type {PageNode} from 'store/page_tree';
 
-import {Button} from 'components/form_controls/button';
+import PageMenu from 'components/page_menu/page_menu';
+import Spacer from 'components/spacer/spacer';
 
+import {MAX_PAGE_DEPTH} from './depth';
 import {usePageDragDrop} from './dnd/use_page_drag_drop';
+import PageDragPreview from './page_drag_preview';
 import styles from './page_tree_node.module.scss';
 
-const INDENT_STEP = 16;
+const INDENT_STEP = 12;
+
+// Vertical spacing between rows. Shared with the tree's CSS gap so the reorder
+// indicator lands in the middle of the gap instead of against a row's edge.
+const ROW_GAP = '8px';
 
 type Props = {
     node: PageNode;
     activePageId?: string;
     collapsed: Set<string>;
     descendants: Map<string, Set<string>>;
+    subtreeHeights: Map<string, number>;
+    draggingId: string | null;
     dndEnabled: boolean;
     onSelect: (pageId: string) => void;
     onToggle: (pageId: string) => void;
+    onSetCollapsed: (ids: string[], collapsed: boolean) => void;
 };
 
-const PageTreeNode = ({node, activePageId, collapsed, descendants, dndEnabled, onSelect, onToggle}: Props) => {
+const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeights, draggingId, dndEnabled, onSelect, onToggle, onSetCollapsed}: Props) => {
     const {formatMessage} = useIntl();
     const [element, setElement] = useState<HTMLDivElement | null>(null);
+    const [titleOverflowing, titleRef] = useTextOverflow();
+
+    // Narrow subscription: only this page's own favorite state re-renders the row.
+    const favorited = useIsFavorite('page', node.page.id);
     const {page, children, depth} = node;
     const hasChildren = children.length > 0;
     const isCollapsed = collapsed.has(page.id);
 
+    // A drag can never drop into its own subtree; those rows aren't drop targets
+    // (truthful canDrop), so mark them as an invalid zone for the whole drag.
+    const inDraggedSubtree = draggingId !== null && draggingId !== page.id && (descendants.get(draggingId)?.has(page.id) ?? false);
+    const isActive = page.id === activePageId;
+
     const toggleLabel = isCollapsed ? formatMessage({id: 'docs.pageTree.expand', defaultMessage: 'Expand {title}'}, {title: page.title}) : formatMessage({id: 'docs.pageTree.collapse', defaultMessage: 'Collapse {title}'}, {title: page.title});
+    const menuLabel = formatMessage({id: 'docs.pageTree.menu', defaultMessage: 'Page options for {title}'}, {title: page.title});
+    const favoriteLabel = formatMessage({id: 'docs.pageTree.favorited', defaultMessage: 'Favorited'});
 
-    const {dragging, dropTarget} = usePageDragDrop({
+    const {dragging, dropTarget, blocked, previewContainer} = usePageDragDrop({
         pageId: page.id,
         element,
         enabled: dndEnabled,
-        canDrop: (sourceId) => !descendants.get(sourceId)?.has(page.id),
+        canDrop: (sourceId, mode) => {
+            if (descendants.get(sourceId)?.has(page.id)) {
+                return false;
+            }
+
+            // Reparenting nests the source one level under this row; reordering
+            // makes it a sibling. Either way its own subtree rides along, so the
+            // deepest moved node must still fit under the level cap.
+            const movedDepth = mode === 'reparent' ? depth + 1 : depth;
+            return movedDepth + (subtreeHeights.get(sourceId) ?? 0) <= MAX_PAGE_DEPTH;
+        },
     });
 
+    // Shift-click expands/collapses the whole subtree: apply this node's next
+    // state to it and all of its descendants at once.
+    const toggleRecursive = () => {
+        const ids = [page.id, ...(descendants.get(page.id) ?? [])];
+        onSetCollapsed(ids, !isCollapsed);
+    };
+
+    const onRowClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (event.shiftKey && hasChildren) {
+            toggleRecursive();
+            return;
+        }
+        onSelect(page.id);
+    };
+
+    const onChevronClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        if (event.shiftKey) {
+            toggleRecursive();
+            return;
+        }
+        onToggle(page.id);
+    };
+
+    const onRowKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onSelect(page.id);
+            return;
+        }
+
+        if (!hasChildren) {
+            return;
+        }
+
+        if ((event.key === 'ArrowRight' && isCollapsed) || (event.key === 'ArrowLeft' && !isCollapsed)) {
+            event.preventDefault();
+            onToggle(page.id);
+        }
+    };
+
     const PageGlyph = page.type === 'page_folder' ? FolderOutlineIcon : FileTextOutlineIcon;
 
+    // Only a clipped title gets a tooltip; a fully visible one would just repeat
+    // the text under the pointer.
+    const title = (
+        <WithTooltip
+            title={page.title}
+            disabled={!titleOverflowing}
+        >
+            <span
+                ref={titleRef}
+                className={styles.title}
+            >
+                {page.title}
+            </span>
+        </WithTooltip>
+    );
+
     return (
-        <div className={styles.node}>
+        <div
+            className={styles.node}
+            role='none'
+        >
             <div
                 ref={setElement}
                 className={classNames(styles.row, {
-                    [styles.active]: page.id === activePageId,
+                    [styles.active]: isActive,
                     [styles.dragging]: dragging,
                     [styles.reparent]: dropTarget?.mode === 'reparent',
+                    [styles.blocked]: blocked,
+                    [styles.invalidZone]: inDraggedSubtree,
                 })}
-                style={{paddingInlineStart: depth * INDENT_STEP}}
+                style={{marginInlineStart: depth * INDENT_STEP}}
+                role='treeitem'
+                tabIndex={0}
+                aria-level={depth + 1}
+                aria-selected={isActive}
+                aria-expanded={hasChildren ? !isCollapsed : undefined}
+                onClick={onRowClick}
+                onKeyDown={onRowKeyDown}
             >
                 {hasChildren ? (
-                    <Button
+                    <button
                         type='button'
-                        emphasis='quaternary'
-                        size='sm'
-                        className={classNames('btn-icon', styles.chevron)}
+                        className={styles.chevron}
+                        tabIndex={-1}
                         aria-label={toggleLabel}
                         aria-expanded={!isCollapsed}
-                        onClick={() => onToggle(page.id)}
+                        onClick={onChevronClick}
                     >
                         {isCollapsed ? <ChevronRightIcon size={16}/> : <ChevronDownIcon size={16}/>}
-                    </Button>
+                    </button>
                 ) : (
-                    <span className={styles.chevronSpacer}/>
+                    <span
+                        className={styles.chevronSpacer}
+                        aria-hidden={true}
+                    />
                 )}
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className={styles.label}
-                    title={page.title}
-                    onClick={() => onSelect(page.id)}
+                <span
+                    className={styles.icon}
+                    aria-hidden={true}
                 >
+                    <PageGlyph size={16}/>
+                </span>
+                {title}
+                {favorited && (
                     <span
-                        className={styles.icon}
-                        aria-hidden={true}
+                        className={styles.favorite}
+                        aria-label={favoriteLabel}
+                        role='img'
                     >
-                        <PageGlyph size={16}/>
+                        <StarIcon size={12}/>
                     </span>
-                    <span className={styles.title}>{page.title}</span>
-                </Button>
+                )}
+                <Spacer/>
+                <PageMenu
+                    spaceId={page.space_id}
+                    pageId={page.id}
+                    pageTitle={page.title}
+                    align='right'
+                    trigger={(
+                        <button
+                            type='button'
+                            className={styles.menuTrigger}
+                            tabIndex={-1}
+                            aria-label={menuLabel}
+                            onClick={(event) => event.stopPropagation()}
+                        >
+                            <DotsHorizontalIcon size={16}/>
+                        </button>
+                    )}
+                />
                 {dropTarget?.mode === 'reorder' && (
                     <DropIndicator
                         edge={dropTarget.edge}
-                        gap='0px'
+                        gap={ROW_GAP}
                     />
                 )}
             </div>
+            {previewContainer && createPortal(
+                <PageDragPreview
+                    title={page.title}
+                    type={page.type}
+                    childCount={children.length}
+                />,
+                previewContainer,
+            )}
             {hasChildren && !isCollapsed && (
-                <div className={styles.children}>
+                <div
+                    className={styles.children}
+                    role='none'
+                >
                     {children.map((child) => (
                         <PageTreeNode
                             key={child.page.id}
@@ -106,9 +243,12 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, dndEnabled, o
                             activePageId={activePageId}
                             collapsed={collapsed}
                             descendants={descendants}
+                            subtreeHeights={subtreeHeights}
+                            draggingId={draggingId}
                             dndEnabled={dndEnabled}
                             onSelect={onSelect}
                             onToggle={onToggle}
+                            onSetCollapsed={onSetCollapsed}
                         />
                     ))}
                 </div>
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
index 2e740c9..a94bffd 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
@@ -2,42 +2,38 @@
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    width: 264px;
+    width: 100%;
     height: 100%;
     padding: 8px;
     border-right: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
     background: var(--center-channel-bg);
-}
-
-.header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 32px;
-    padding: 0 4px 0 8px;
-}
-
-.heading {
-    color: rgba(var(--center-channel-color-rgb), 0.75);
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 16px;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
+    overflow-y: auto;
 }
 
 .tree {
     display: flex;
-    flex: 1 1 0;
     flex-direction: column;
-    margin-top: 4px;
-    overflow-y: auto;
+    gap: 8px;
 }
 
-.addPage {
-    gap: 6px;
+.separator {
+    flex-shrink: 0;
+    height: 1px;
+    margin: 8px 4px;
+    background: rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+// Neutral (not accent-blue): scoped under `.btn.btn-quaternary` so it beats
+// core's quaternary button color.
+.addPage:global(.btn.btn-quaternary) {
     justify-content: flex-start;
-    margin-top: 4px;
+    width: 100%;
+    gap: 6px;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     font-weight: 400;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: var(--center-channel-color);
+    }
 }
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
index 0d70ecf..99eb941 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
@@ -3,13 +3,14 @@
 
 import {useDocsNavigation} from 'hooks/navigation';
 import {useCollapsedPages} from 'hooks/page_tree';
+import {useCreateRootPage} from 'hooks/pages';
 import {useAppDispatch, useAppSelector} from 'hooks/redux';
 import React, {useCallback, useMemo} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 
 import PlusIcon from '@mattermost/compass-icons/components/plus';
 
-import {createPage, movePage} from 'store/actions';
+import {movePage} from 'store/actions';
 import {buildDescendantMap, buildPageTree} from 'store/page_tree';
 import {getPagesForSpace} from 'store/selectors';
 
@@ -17,61 +18,40 @@ import {Button} from 'components/form_controls/button';
 
 import type {Space} from 'types/docs';
 
+import {buildSubtreeHeightMap} from './depth';
 import {usePagesDnd} from './dnd/use_pages_dnd';
 import PageTreeNode from './page_tree_node';
 import styles from './page_tree_panel.module.scss';
+import SpaceHomeItem from './space_home_item';
+
+import {PAGES_SECTION_LABEL_ID} from '../page_header';
 
 const PageTreePanel = ({space}: {space: Space}) => {
-    const {formatMessage} = useIntl();
     const dispatch = useAppDispatch();
     const {goToPage, pageId} = useDocsNavigation();
-    const {collapsed, toggle} = useCollapsedPages();
+    const {collapsed, toggle, setCollapsedFor} = useCollapsedPages();
+    const createRootPage = useCreateRootPage(space.id);
 
     const pages = useAppSelector((state) => getPagesForSpace(state, space.id));
     const roots = useMemo(() => buildPageTree(pages), [pages]);
     const descendants = useMemo(() => buildDescendantMap(roots), [roots]);
-
-    const untitled = formatMessage({id: 'docs.pageTree.untitled', defaultMessage: 'Untitled'});
-    const addLabel = formatMessage({id: 'docs.pageTree.add', defaultMessage: 'Add page'});
-
-    const createRootPage = useCallback(async () => {
-        try {
-            const page = await dispatch(createPage(space.id, {title: untitled}));
-            goToPage(space.id, page.id);
-        } catch (error) {
-            // eslint-disable-next-line no-console
-            console.error('Docs: failed to create page', error);
-        }
-    }, [dispatch, space.id, untitled, goToPage]);
+    const subtreeHeights = useMemo(() => buildSubtreeHeightMap(roots), [roots]);
 
     const onMove = useCallback(({pageId: movedId, parentId, siblingIndex}: {pageId: string; parentId: string; siblingIndex: number}) => {
         dispatch(movePage(space.id, movedId, parentId, siblingIndex));
     }, [dispatch, space.id]);
 
-    usePagesDnd({pages, onMove, enabled: pages.length > 0});
+    const {draggingId} = usePagesDnd({pages, onMove, enabled: pages.length > 0});
 
     return (
         <div className={styles.panel}>
-            <div className={styles.header}>
-                <span className={styles.heading}>
-                    <FormattedMessage
-                        id='docs.pageTree.heading'
-                        defaultMessage='Pages'
-                    />
-                </span>
-                <Button
-                    type='button'
-                    emphasis='quaternary'
-                    size='sm'
-                    className='btn-icon'
-                    aria-label={addLabel}
-                    onClick={createRootPage}
-                >
-                    <PlusIcon size={16}/>
-                </Button>
-            </div>
+            <SpaceHomeItem space={space}/>
 
-            <div className={styles.tree}>
+            <div
+                className={styles.tree}
+                role='tree'
+                aria-labelledby={PAGES_SECTION_LABEL_ID}
+            >
                 {roots.map((node) => (
                     <PageTreeNode
                         key={node.page.id}
@@ -79,21 +59,27 @@ const PageTreePanel = ({space}: {space: Space}) => {
                         activePageId={pageId}
                         collapsed={collapsed}
                         descendants={descendants}
+                        subtreeHeights={subtreeHeights}
+                        draggingId={draggingId}
                         dndEnabled={true}
                         onSelect={(id) => goToPage(space.id, id)}
                         onToggle={toggle}
+                        onSetCollapsed={setCollapsedFor}
                     />
                 ))}
             </div>
 
+            <div
+                className={styles.separator}
+                role='presentation'
+            />
             <Button
-                type='button'
                 emphasis='quaternary'
                 size='sm'
                 className={styles.addPage}
+                leadingIcon={<PlusIcon size={16}/>}
                 onClick={createRootPage}
             >
-                <PlusIcon size={16}/>
                 <FormattedMessage
                     id='docs.pageTree.add'
                     defaultMessage='Add page'
diff --git a/webapp/src/components/space_view/page_tree/space_home_item.module.scss b/webapp/src/components/space_view/page_tree/space_home_item.module.scss
new file mode 100644
index 0000000..631c7f1
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/space_home_item.module.scss
@@ -0,0 +1,60 @@
+// Mirrors a page tree row's metrics and states so the space's front door reads as
+// part of the same list, while being a real button (it isn't a treeitem).
+.row {
+    display: flex;
+    width: 100%;
+    min-height: 32px;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+
+    // Matches the tree's own row gap, so Overview reads as the list's first row.
+    margin-block-end: 8px;
+    padding-block: 2px;
+
+    // Stands in for a tree row's chevron slot (16px) plus its gap (4px), so the
+    // icon lands on the same axis as the page rows' icons and the Pages toggle's.
+    padding-inline: 20px 4px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--button-bg);
+        outline-offset: -2px;
+    }
+}
+
+.active,
+.active:hover {
+    background: rgba(var(--button-bg-rgb), 0.08);
+}
+
+.icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
+}
+
+// Body 100 - Semibold
+.title {
+    overflow: hidden;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.active .icon,
+.active .title {
+    color: var(--button-bg);
+}
diff --git a/webapp/src/components/space_view/page_tree/space_home_item.tsx b/webapp/src/components/space_view/page_tree/space_home_item.tsx
new file mode 100644
index 0000000..5cce4b8
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/space_home_item.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import {useDocsNavigation} from 'hooks/navigation';
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {SpaceIcon} from 'utils/space_icon';
+
+import type {Space} from 'types/docs';
+
+import styles from './space_home_item.module.scss';
+
+type Props = {
+    space: Space;
+};
+
+/**
+ * The space's front door, above the page tree. Sits outside the tree's
+ * `role="tree"` — it isn't a page — so it's a plain button rather than a
+ * treeitem, and reads as selected whenever no page is routed.
+ */
+const SpaceHomeItem = ({space}: Props) => {
+    const {formatMessage} = useIntl();
+    const {pageId, goToOverview} = useDocsNavigation();
+    const active = !pageId;
+
+    return (
+        <button
+            type='button'
+            className={classNames(styles.row, {[styles.active]: active})}
+            aria-current={active ? 'page' : undefined}
+            onClick={() => goToOverview(space.id)}
+        >
+            <span
+                className={styles.icon}
+                aria-hidden={true}
+            >
+                <SpaceIcon
+                    space={space}
+                    size={16}
+                />
+            </span>
+            <span className={styles.title}>
+                {formatMessage({id: 'docs.pageTree.overview', defaultMessage: 'Overview'})}
+            </span>
+        </button>
+    );
+};
+
+export default SpaceHomeItem;
diff --git a/webapp/src/components/space_view/sidebar/sidebar.module.scss b/webapp/src/components/space_view/sidebar/sidebar.module.scss
new file mode 100644
index 0000000..c32f630
--- /dev/null
+++ b/webapp/src/components/space_view/sidebar/sidebar.module.scss
@@ -0,0 +1,25 @@
+.sidebar {
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    // Closed: width animates to 0, then visibility flips so the clipped content
+    // leaves the tab order (it stays mounted for the slide).
+    visibility: hidden;
+    transition: width 200ms ease, visibility 0s 200ms;
+}
+
+.open {
+    visibility: visible;
+    transition: width 200ms ease;
+}
+
+// Dragging sets the width every frame; animating it would lag the pointer.
+.resizing {
+    transition: none;
+}
+
+// Holds the full width so the content is revealed, not squeezed, mid-slide.
+.inner {
+    height: 100%;
+}
diff --git a/webapp/src/components/space_view/sidebar/sidebar.tsx b/webapp/src/components/space_view/sidebar/sidebar.tsx
new file mode 100644
index 0000000..18d8c32
--- /dev/null
+++ b/webapp/src/components/space_view/sidebar/sidebar.tsx
@@ -0,0 +1,69 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import {useSidebarWidth} from 'hooks/sidebar_width';
+import React, {useState} from 'react';
+import {useIntl} from 'react-intl';
+
+import ResizableDivider from 'components/resizable_divider/resizable_divider';
+
+import styles from './sidebar.module.scss';
+
+export const DEFAULT_SIDEBAR_WIDTH = 264;
+const MIN_SIDEBAR_WIDTH = 200;
+const MAX_SIDEBAR_WIDTH = 480;
+
+type Props = {
+    open: boolean;
+    children: React.ReactNode;
+};
+
+/**
+ * The space view's left sidebar: a user-resizable panel that slides in and out.
+ * The outer element animates its width for the open/close transition while the
+ * inner element keeps the full width, so the content is revealed and clipped
+ * rather than reflowed mid-slide.
+ */
+const Sidebar = ({open, children}: Props) => {
+    const {formatMessage} = useIntl();
+    const {width, setWidth, commitWidth} = useSidebarWidth('pages', DEFAULT_SIDEBAR_WIDTH);
+    const [resizing, setResizing] = useState(false);
+
+    return (
+        <div
+            className={classNames(styles.sidebar, {
+                [styles.open]: open,
+                [styles.resizing]: resizing,
+            })}
+            style={{width: open ? width : 0}}
+        >
+            <div
+                className={styles.inner}
+                style={{width}}
+            >
+                {children}
+            </div>
+            {open && (
+                <ResizableDivider
+                    ariaLabel={formatMessage({id: 'docs.sidebar.resize', defaultMessage: 'Resize pages sidebar'})}
+                    side='left'
+                    width={width}
+                    minWidth={MIN_SIDEBAR_WIDTH}
+                    maxWidth={MAX_SIDEBAR_WIDTH}
+                    defaultWidth={DEFAULT_SIDEBAR_WIDTH}
+                    onResize={(next) => {
+                        setResizing(true);
+                        setWidth(next);
+                    }}
+                    onResizeEnd={(next) => {
+                        setResizing(false);
+                        commitWidth(next);
+                    }}
+                />
+            )}
+        </div>
+    );
+};
+
+export default Sidebar;
diff --git a/webapp/src/components/space_view/space_header.module.scss b/webapp/src/components/space_view/space_header.module.scss
index cb2b60f..b8fffb6 100644
--- a/webapp/src/components/space_view/space_header.module.scss
+++ b/webapp/src/components/space_view/space_header.module.scss
@@ -1,8 +1,25 @@
-.titleTrigger {
-    display: inline-flex;
+/*
+ * Core's global `.btn + .btn { margin-left: 8px }` stacks on top of the header's
+ * flex `gap`, and because it keys off DOM adjacency it toggles as Base UI mounts
+ * focus guards around an open menu trigger — which made the row jump on open.
+ * Spacing in this header comes from `gap` alone.
+ */
+.header :global(.btn + .btn) {
+    margin-left: 0;
+}
+
+.leftCluster {
+    display: flex;
     min-width: 0;
-    max-width: 280px;
     align-items: center;
+    gap: 4px;
+}
+
+// The `.btn` compounds raise specificity over core's `.btn.btn-sm` padding/gap.
+.titleTrigger:global(.btn.btn-sm) {
+    min-width: 0;
+    max-width: 280px;
+    padding: 0 6px;
     gap: 6px;
 }
 
@@ -30,17 +47,12 @@
     color: rgba(var(--center-channel-color-rgb), 0.64);
 }
 
-.members {
-    display: flex;
-    align-items: center;
+.members:global(.btn.btn-sm) {
+    padding: 0 8px;
     gap: 4px;
-    color: rgba(var(--center-channel-color-rgb), 0.64);
-    font-size: 12px;
-    font-weight: 600;
 }
 
-.share {
-    display: inline-flex;
-    align-items: center;
+.share:global(.btn.btn-sm) {
+    padding: 0 12px;
     gap: 6px;
 }
diff --git a/webapp/src/components/space_view/space_header.tsx b/webapp/src/components/space_view/space_header.tsx
index e93c324..79c5141 100644
--- a/webapp/src/components/space_view/space_header.tsx
+++ b/webapp/src/components/space_view/space_header.tsx
@@ -2,9 +2,10 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
+import {useSpaceFavoriteState, useToggleFavorite} from 'hooks/favorites';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {copyToClipboard} from 'utils/clipboard';
 import {SpaceIcon} from 'utils/space_icon';
@@ -17,17 +18,20 @@ import ExitToAppIcon from '@mattermost/compass-icons/components/exit-to-app';
 import InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';
 import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
 import ShareVariantOutlineIcon from '@mattermost/compass-icons/components/share-variant-outline';
+import StarIcon from '@mattermost/compass-icons/components/star';
 import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
 
-import {deleteSpace, leaveSpace} from 'store/actions';
+import {deleteSpace, isLastSpaceMemberError, leaveSpace} from 'store/actions';
 import {useSpacePermissions} from 'store/permissions';
 
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
 import {Button, PrimaryButton} from 'components/form_controls/button';
 import Header from 'components/header/header';
 import Menu from 'components/menu/menu';
-import type {MenuItemSpec} from 'components/menu/menu_types';
+import {openDocsModal} from 'components/modals';
 import ShareSpaceModal from 'components/share_space_modal/share_space_modal';
+import SpaceSettingsModal from 'components/space_settings_modal/space_settings_modal';
+import {toast} from 'components/toast';
 
 import type {Space} from 'types/docs';
 
@@ -38,20 +42,27 @@ type Props = {
     memberCount: number;
     infoOpen: boolean;
     onToggleInfo: () => void;
-    onOpenSettings: () => void;
+
+    /** Opens the space info panel on its members view. */
+    onShowMembers: () => void;
 };
 
-const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings}: Props) => {
+const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}: Props) => {
     const {formatMessage} = useIntl();
     const dispatch = useAppDispatch();
     const {paths, spaceId, goHome} = useDocsNavigation();
     const {canManageMembers} = useSpacePermissions(space.id);
+    const favoriteState = useSpaceFavoriteState(space.id);
+    const toggleFavorite = useToggleFavorite();
+    const favorited = favoriteState === 'on';
 
-    const [shareOpen, setShareOpen] = useState(false);
-    const [confirmLeaveOpen, setConfirmLeaveOpen] = useState(false);
-    const [confirmArchiveOpen, setConfirmArchiveOpen] = useState(false);
-
-    const favoriteLabel = formatMessage({id: 'docs.space.favorite', defaultMessage: 'Favorite this space'});
+    // `partial` means the space isn't favorited but holds favorited pages, so the
+    // action offered is still "favorite this space".
+    const favoriteLabel = {
+        on: formatMessage({id: 'docs.space.unfavorite', defaultMessage: 'Remove from favorites'}),
+        partial: formatMessage({id: 'docs.space.favoritePartial', defaultMessage: 'Favorite this space (some pages are favorited)'}),
+        off: formatMessage({id: 'docs.space.favorite', defaultMessage: 'Favorite this space'}),
+    }[favoriteState];
     const menuLabel = formatMessage({id: 'docs.space.menu', defaultMessage: 'Space options'});
     const infoLabel = formatMessage({id: 'docs.space.details', defaultMessage: 'Space details'});
     const membersLabel = formatMessage({id: 'docs.space.membersButton', defaultMessage: 'Members'});
@@ -60,127 +71,146 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings
         copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
     }, [paths, space.id]);
 
-    // Navigate home only when we just acted on the space being viewed, and only
-    // after the server confirms (leaving the last authorized member is rejected).
-    const confirmLeave = useCallback(async () => {
-        try {
-            await dispatch(leaveSpace(space.id));
-            if (spaceId === space.id) {
-                goHome();
-            }
-        } catch (error) {
-            // eslint-disable-next-line no-console
-            console.error('Docs: failed to leave space', error);
-        }
-        setConfirmLeaveOpen(false);
-    }, [dispatch, space.id, spaceId, goHome]);
+    const openShare = useCallback(() => {
+        openDocsModal((modal) => (
+            <ShareSpaceModal
+                space={space}
+                onClose={modal.close}
+            />
+        ));
+    }, [space]);
 
-    const confirmArchive = useCallback(async () => {
-        try {
-            await dispatch(deleteSpace(space.id));
-            if (spaceId === space.id) {
-                goHome();
-            }
-        } catch (error) {
-            // eslint-disable-next-line no-console
-            console.error('Docs: failed to archive space', error);
-        }
-        setConfirmArchiveOpen(false);
-    }, [dispatch, space.id, spaceId, goHome]);
+    const openSettings = useCallback(() => {
+        openDocsModal((modal) => (
+            <SpaceSettingsModal
+                space={space}
+                onClose={modal.close}
+            />
+        ));
+    }, [space]);
 
-    const items: MenuItemSpec[] = [
-        {
-            id: 'info',
-            label: (
-                <FormattedMessage
-                    id='docs.space.menu.info'
-                    defaultMessage='Space info'
-                />
-            ),
-            leadingIcon: <InformationOutlineIcon size={18}/>,
-            onClick: onToggleInfo,
-        },
-        {
-            id: 'members',
-            label: (
-                <FormattedMessage
-                    id='docs.space.menu.members'
-                    defaultMessage='Members'
-                />
-            ),
-            leadingIcon: <AccountMultipleOutlineIcon size={18}/>,
-            onClick: () => setShareOpen(true),
-        },
-        {
-            id: 'copy-link',
-            label: (
-                <FormattedMessage
-                    id='docs.space.menu.copyLink'
-                    defaultMessage='Copy link'
-                />
-            ),
-            leadingIcon: <LinkVariantIcon size={18}/>,
-            onClick: copyLink,
-        },
-        ...(canManageMembers ? [{
-            id: 'settings',
-            label: (
-                <FormattedMessage
-                    id='docs.space.menu.settings'
-                    defaultMessage='Space settings'
-                />
-            ),
-            leadingIcon: <CogOutlineIcon size={18}/>,
-            onClick: onOpenSettings,
-        }] : []),
-        {
-            id: 'leave',
-            label: (
+    // Leaving the last authorized member is rejected server-side; keep the user
+    // in the space and surface the reason. Navigate home only when we just left
+    // the space being viewed.
+    const openLeaveConfirm = useCallback(() => {
+        openDocsModal((modal) => (
+            <ConfirmModal
+                title={(
+                    <FormattedMessage
+                        id='docs.leaveSpace.title'
+                        defaultMessage='Leave {name}'
+                        values={{name: space.title}}
+                    />
+                )}
+                confirmButtonText={(
+                    <FormattedMessage
+                        id='docs.leaveSpace.confirm'
+                        defaultMessage='Yes, leave space'
+                    />
+                )}
+                isConfirmDestructive={true}
+                onConfirm={async () => {
+                    try {
+                        await dispatch(leaveSpace(space.id));
+                        if (spaceId === space.id) {
+                            goHome();
+                        }
+                    } catch (error) {
+                        const description = isLastSpaceMemberError(error) ? formatMessage({
+                            id: 'docs.leaveSpace.error.lastMember',
+                            defaultMessage: 'A space must keep at least one member with access. Add another member before you leave.',
+                        }) : formatMessage({
+                            id: 'docs.leaveSpace.error.generic',
+                            defaultMessage: 'Something went wrong. Please try again.',
+                        });
+                        toast.error(
+                            formatMessage({
+                                id: 'docs.leaveSpace.error.title',
+                                defaultMessage: 'Unable to leave {name}',
+                            }, {name: space.title}),
+                            {description},
+                        );
+                    }
+                    modal.close();
+                }}
+                onCancel={modal.close}
+            >
                 <FormattedMessage
-                    id='docs.space.menu.leave'
-                    defaultMessage='Leave space'
+                    id='docs.leaveSpace.message'
+                    defaultMessage='Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.'
+                    values={{
+                        name: space.title,
+                        b: (chunks) => <b>{chunks}</b>,
+                    }}
                 />
-            ),
-            leadingIcon: <ExitToAppIcon size={18}/>,
-            hasDivider: true,
-            onClick: () => setConfirmLeaveOpen(true),
-        },
-        ...(canManageMembers ? [{
-            id: 'archive',
-            label: (
+            </ConfirmModal>
+        ));
+    }, [dispatch, space.id, space.title, spaceId, goHome, formatMessage]);
+
+    const openArchiveConfirm = useCallback(() => {
+        openDocsModal((modal) => (
+            <ConfirmModal
+                title={(
+                    <FormattedMessage
+                        id='docs.archiveSpace.title'
+                        defaultMessage='Archive {name}'
+                        values={{name: space.title}}
+                    />
+                )}
+                confirmButtonText={(
+                    <FormattedMessage
+                        id='docs.archiveSpace.confirm'
+                        defaultMessage='Yes, archive space'
+                    />
+                )}
+                isConfirmDestructive={true}
+                onConfirm={async () => {
+                    try {
+                        await dispatch(deleteSpace(space.id));
+                        if (spaceId === space.id) {
+                            goHome();
+                        }
+                    } catch (error) {
+                        // eslint-disable-next-line no-console
+                        console.error('Docs: failed to archive space', error);
+                    }
+                    modal.close();
+                }}
+                onCancel={modal.close}
+            >
                 <FormattedMessage
-                    id='docs.space.menu.archive'
-                    defaultMessage='Archive space'
+                    id='docs.archiveSpace.message'
+                    defaultMessage='Are you sure you want to archive the <b>{name}</b> space? Members will lose access until it is restored.'
+                    values={{
+                        name: space.title,
+                        b: (chunks) => <b>{chunks}</b>,
+                    }}
                 />
-            ),
-            leadingIcon: <ArchiveOutlineIcon size={18}/>,
-            isDestructive: true,
-            onClick: () => setConfirmArchiveOpen(true),
-        }] : []),
-    ];
+            </ConfirmModal>
+        ));
+    }, [dispatch, space.id, space.title, spaceId, goHome]);
 
+    // The space title names the trigger, so it carries no aria-label; the menu
+    // itself is named by `ariaLabel` on the popup.
     const left = (
-        <>
+        <div className={styles.leftCluster}>
             <Button
-                type='button'
                 emphasis='quaternary'
-                size='xs'
-                className='btn-icon'
-                aria-label={favoriteLabel}
+                size='sm'
+                className={classNames('btn-icon', {active: favoriteState !== 'off'})}
+                tooltip={favoriteLabel}
+                aria-pressed={favoriteState === 'partial' ? 'mixed' : favorited}
+                onClick={() => toggleFavorite('space', space.id)}
             >
-                <StarOutlineIcon size={18}/>
+                {favorited ? <StarIcon size={18}/> : <StarOutlineIcon size={18}/>}
             </Button>
             <Menu
                 ariaLabel={menuLabel}
-                tooltip={menuLabel}
-                items={items}
                 trigger={(
                     <Button
-                        type='button'
                         emphasis='quaternary'
                         size='sm'
                         className={styles.titleTrigger}
-                        aria-label={menuLabel}
                     >
                         <span
                             className={styles.emoji}
@@ -198,39 +228,98 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings
                         />
                     </Button>
                 )}
-            />
+            >
+                <Menu.Item
+                    leadingIcon={<InformationOutlineIcon size={18}/>}
+                    onClick={onToggleInfo}
+                >
+                    <FormattedMessage
+                        id='docs.space.menu.info'
+                        defaultMessage='Space info'
+                    />
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<AccountMultipleOutlineIcon size={18}/>}
+                    onClick={onShowMembers}
+                >
+                    <FormattedMessage
+                        id='docs.space.menu.members'
+                        defaultMessage='Members'
+                    />
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<LinkVariantIcon size={18}/>}
+                    onClick={copyLink}
+                >
+                    <FormattedMessage
+                        id='docs.space.menu.copyLink'
+                        defaultMessage='Copy link'
+                    />
+                </Menu.Item>
+                {canManageMembers && (
+                    <Menu.Item
+                        leadingIcon={<CogOutlineIcon size={18}/>}
+                        onClick={openSettings}
+                    >
+                        <FormattedMessage
+                            id='docs.space.menu.settings'
+                            defaultMessage='Space settings'
+                        />
+                    </Menu.Item>
+                )}
+                <Menu.Separator/>
+                <Menu.Item
+                    leadingIcon={<ExitToAppIcon size={18}/>}
+                    destructive={true}
+                    onClick={openLeaveConfirm}
+                >
+                    <FormattedMessage
+                        id='docs.space.menu.leave'
+                        defaultMessage='Leave space'
+                    />
+                </Menu.Item>
+                {canManageMembers && (
+                    <Menu.Item
+                        leadingIcon={<ArchiveOutlineIcon size={18}/>}
+                        destructive={true}
+                        onClick={openArchiveConfirm}
+                    >
+                        <FormattedMessage
+                            id='docs.space.menu.archive'
+                            defaultMessage='Archive space'
+                        />
+                    </Menu.Item>
+                )}
+            </Menu>
             <Button
-                type='button'
                 emphasis='quaternary'
-                size='xs'
+                size='sm'
                 className={classNames('docs-btn-neutral', styles.members)}
-                aria-label={membersLabel}
-                onClick={() => setShareOpen(true)}
+                tooltip={membersLabel}
+                onClick={onShowMembers}
             >
                 <AccountMultipleOutlineIcon size={16}/>
                 <span>{memberCount}</span>
             </Button>
-        </>
+        </div>
     );
 
     const right = (
         <>
             <Button
-                type='button'
                 emphasis='quaternary'
                 size='sm'
                 className={classNames('btn-icon', {active: infoOpen})}
-                aria-label={infoLabel}
+                tooltip={infoLabel}
                 aria-pressed={infoOpen}
                 onClick={onToggleInfo}
             >
                 <InformationOutlineIcon size={18}/>
             </Button>
             <PrimaryButton
-                type='button'
                 size='sm'
                 className={styles.share}
-                onClick={() => setShareOpen(true)}
+                onClick={openShare}
             >
                 <ShareVariantOutlineIcon size={16}/>
                 <FormattedMessage
@@ -242,76 +331,11 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onOpenSettings
     );
 
     return (
-        <>
-            <Header
-                left={left}
-                right={right}
-            />
-            {shareOpen && (
-                <ShareSpaceModal
-                    space={space}
-                    onClose={() => setShareOpen(false)}
-                />
-            )}
-            {confirmLeaveOpen && (
-                <ConfirmModal
-                    title={(
-                        <FormattedMessage
-                            id='docs.leaveSpace.title'
-                            defaultMessage='Leave {name}'
-                            values={{name: space.title}}
-                        />
-                    )}
-                    confirmButtonText={(
-                        <FormattedMessage
-                            id='docs.leaveSpace.confirm'
-                            defaultMessage='Yes, leave space'
-                        />
-                    )}
-                    isConfirmDestructive={true}
-                    onConfirm={confirmLeave}
-                    onCancel={() => setConfirmLeaveOpen(false)}
-                >
-                    <FormattedMessage
-                        id='docs.leaveSpace.message'
-                        defaultMessage='Are you sure you want to leave the <b>{name}</b> space? You can rejoin later if it is public.'
-                        values={{
-                            name: space.title,
-                            b: (chunks) => <b>{chunks}</b>,
-                        }}
-                    />
-                </ConfirmModal>
-            )}
-            {confirmArchiveOpen && (
-                <ConfirmModal
-                    title={(
-                        <FormattedMessage
-                            id='docs.archiveSpace.title'
-                            defaultMessage='Archive {name}'
-                            values={{name: space.title}}
-                        />
-                    )}
-                    confirmButtonText={(
-                        <FormattedMessage
-                            id='docs.archiveSpace.confirm'
-                            defaultMessage='Yes, archive space'
-                        />
-                    )}
-                    isConfirmDestructive={true}
-                    onConfirm={confirmArchive}
-                    onCancel={() => setConfirmArchiveOpen(false)}
-                >
-                    <FormattedMessage
-                        id='docs.archiveSpace.message'
-                        defaultMessage='Are you sure you want to archive the <b>{name}</b> space? Members will lose access until it is restored.'
-                        values={{
-                            name: space.title,
-                            b: (chunks) => <b>{chunks}</b>,
-                        }}
-                    />
-                </ConfirmModal>
-            )}
-        </>
+        <Header
+            className={styles.header}
+            left={left}
+            right={right}
+        />
     );
 };
 
diff --git a/webapp/src/components/space_view/space_view.module.scss b/webapp/src/components/space_view/space_view.module.scss
index 4270c4f..1116a73 100644
--- a/webapp/src/components/space_view/space_view.module.scss
+++ b/webapp/src/components/space_view/space_view.module.scss
@@ -1,28 +1,23 @@
+// Row: the primary column, then the full-height space info panel.
 .root {
     display: flex;
     flex: 1 1 0;
-    flex-direction: column;
     min-width: 0;
     height: 100%;
     background: var(--center-channel-bg);
 }
 
-.body {
+.primary {
     display: flex;
     flex: 1 1 0;
-    min-height: 0;
-}
-
-// Fixed-width tree panel clipped by a wrapper whose width animates open/closed.
-.sidebar {
-    flex-shrink: 0;
-    width: 0;
-    overflow: hidden;
-    transition: width 200ms ease;
+    flex-direction: column;
+    min-width: 0;
 }
 
-.sidebarOpen {
-    width: 264px;
+.body {
+    display: flex;
+    flex: 1 1 0;
+    min-height: 0;
 }
 
 .main {
@@ -33,20 +28,16 @@
 }
 
 .scroll {
+    display: flex;
     flex: 1 1 0;
+    flex-direction: column;
     overflow-y: auto;
 }
 
 .content {
     display: flex;
+    flex: 1 1 auto;
     flex-direction: column;
     gap: 24px;
     padding: 20px 24px;
 }
-
-.placeholder {
-    padding: 8px 4px 40px;
-    color: rgba(var(--center-channel-color-rgb), 0.56);
-    font-size: 14px;
-    line-height: 20px;
-}
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index ad976c5..f605be0 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -1,83 +1,99 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import classNames from 'classnames';
+import {useDocsNavigation} from 'hooks/navigation';
+import {useDefaultPagePath} from 'hooks/pages';
+import {useAppSelector} from 'hooks/redux';
 import {useSpaceStats} from 'hooks/spaces';
 import React, {useCallback, useState} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {Redirect} from 'react-router-dom';
+
+import {getPage} from 'store/selectors';
 
 import SpaceInfoPanel from 'components/space_info/space_info_panel';
-import SpaceSettingsModal from 'components/space_settings_modal/space_settings_modal';
+import type {SpaceInfoView} from 'components/space_info/space_info_panel';
 
 import type {Space} from 'types/docs';
 
+import PageContent from './page_content/page_content';
+import PageContentPlaceholder from './page_content/page_content_placeholder';
 import PageHeader from './page_header';
 import PageHero from './page_hero';
 import PageTreePanel from './page_tree/page_tree_panel';
+import Sidebar from './sidebar/sidebar';
 import SpaceHeader from './space_header';
 import styles from './space_view.module.scss';
 
-// Main content for a routed space: the space header and page header stack
-// full-width at the top; below them a flex row holds the pages sidebar (which
-// slides in/out), the page content column (front-door hero over the editor
-// area), and the optional space info panel as a right column. The page body is
-// a placeholder until the editor is mounted.
+// Main content for a routed space. The space info panel is a full-height right
+// column, so its own header lines up with the space header rather than starting
+// below it; everything else lives in the primary column to its left — the space
+// header and page header stacked at the top, then a row of the resizable pages
+// sidebar and the page content. The content column shows the space front door
+// (hero) until a page is routed, at which point it shows that page instead.
+// Page bodies are a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
+    const {pageId} = useDocsNavigation();
+    const page = useAppSelector((state) => (pageId ? getPage(state, pageId) : undefined));
     const {pageCount, memberCount} = useSpaceStats(space.id);
+    const defaultPagePath = useDefaultPagePath(space);
     const [treeOpen, setTreeOpen] = useState(true);
-    const [infoOpen, setInfoOpen] = useState(false);
-    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [infoView, setInfoView] = useState<SpaceInfoView | null>(null);
 
     const togglePages = useCallback(() => setTreeOpen((open) => !open), []);
-    const toggleInfo = useCallback(() => setInfoOpen((open) => !open), []);
-    const openSettings = useCallback(() => setSettingsOpen(true), []);
+    const toggleInfo = useCallback(() => setInfoView((view) => (view ? null : 'root')), []);
+    const closeInfo = useCallback(() => setInfoView(null), []);
+    const showMembers = useCallback(() => setInfoView('members'), []);
+
+    // A space with a default page opens on that page; `<Redirect>` replaces the
+    // space-home entry rather than pushing one.
+    if (defaultPagePath) {
+        return <Redirect to={defaultPagePath}/>;
+    }
 
     return (
         <div className={styles.root}>
-            <SpaceHeader
-                space={space}
-                memberCount={memberCount}
-                infoOpen={infoOpen}
-                onToggleInfo={toggleInfo}
-                onOpenSettings={openSettings}
-            />
-            <PageHeader
-                space={space}
-                treeOpen={treeOpen}
-                onTogglePages={togglePages}
-            />
-            <div className={styles.body}>
-                <div className={classNames(styles.sidebar, {[styles.sidebarOpen]: treeOpen})}>
-                    <PageTreePanel space={space}/>
-                </div>
-                <div className={styles.main}>
-                    <div className={styles.scroll}>
-                        <div className={styles.content}>
-                            <PageHero
-                                space={space}
-                                pageCount={pageCount}
-                                memberCount={memberCount}
-                            />
-                            <div className={styles.placeholder}>
-                                <FormattedMessage
-                                    id='docs.space.bodyPlaceholder'
-                                    defaultMessage='Page content will appear here once the editor is available.'
-                                />
-                            </div>
+            <div className={styles.primary}>
+                <SpaceHeader
+                    space={space}
+                    memberCount={memberCount}
+                    infoOpen={infoView !== null}
+                    onToggleInfo={toggleInfo}
+                    onShowMembers={showMembers}
+                />
+                <PageHeader
+                    space={space}
+                    page={page}
+                    treeOpen={treeOpen}
+                    onTogglePages={togglePages}
+                />
+                <div className={styles.body}>
+                    <Sidebar open={treeOpen}>
+                        <PageTreePanel space={space}/>
+                    </Sidebar>
+                    <div className={styles.main}>
+                        <div className={styles.scroll}>
+                            {pageId ? (
+                                <PageContent pageId={pageId}/>
+                            ) : (
+                                <div className={styles.content}>
+                                    <PageHero
+                                        space={space}
+                                        pageCount={pageCount}
+                                        memberCount={memberCount}
+                                    />
+                                    <PageContentPlaceholder/>
+                                </div>
+                            )}
                         </div>
                     </div>
                 </div>
-                {infoOpen && (
-                    <SpaceInfoPanel
-                        space={space}
-                        onClose={toggleInfo}
-                    />
-                )}
             </div>
-            {settingsOpen && (
-                <SpaceSettingsModal
+            {infoView && (
+                <SpaceInfoPanel
                     space={space}
-                    onClose={() => setSettingsOpen(false)}
+                    view={infoView}
+                    onViewChange={setInfoView}
+                    onClose={closeInfo}
                 />
             )}
         </div>
diff --git a/webapp/src/components/spacer/spacer.module.scss b/webapp/src/components/spacer/spacer.module.scss
new file mode 100644
index 0000000..554a883
--- /dev/null
+++ b/webapp/src/components/spacer/spacer.module.scss
@@ -0,0 +1,6 @@
+// Grows to fill the free space; contributes no size of its own.
+.spacer {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+}
diff --git a/webapp/src/components/spacer/spacer.tsx b/webapp/src/components/spacer/spacer.tsx
new file mode 100644
index 0000000..55156ae
--- /dev/null
+++ b/webapp/src/components/spacer/spacer.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import styles from './spacer.module.scss';
+
+/**
+ * A flexible gap in a flex row or column: absorbs the free space so the siblings
+ * after it sit at the far end. Preferred over an `auto` margin on the trailing
+ * element, because the split is then visible in the markup rather than implied by
+ * a style rule.
+ */
+const Spacer = () => (
+    <div
+        className={styles.spacer}
+        role='presentation'
+    />
+);
+
+export default Spacer;
diff --git a/webapp/src/components/spaces_sidebar/space_item_menu.test.tsx b/webapp/src/components/spaces_sidebar/space_item_menu.test.tsx
index e094321..28bce08 100644
--- a/webapp/src/components/spaces_sidebar/space_item_menu.test.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item_menu.test.tsx
@@ -15,6 +15,13 @@ jest.mock('utils/clipboard', () => ({
     copyToClipboard: jest.fn(),
 }));
 
+// Stubbed at the hook boundary: mattermost-redux's preferences actions are
+// published as ESM that jest doesn't transform.
+jest.mock('hooks/favorites', () => ({
+    useSpaceFavoriteState: () => 'off',
+    useToggleFavorite: () => jest.fn(),
+}));
+
 const space = makeSpace('docs', 'Docs');
 
 function renderMenu(props: Partial<React.ComponentProps<typeof SpaceItemMenu>> = {}) {
diff --git a/webapp/src/components/spaces_sidebar/space_item_menu.tsx b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
index c419046..b18e96c 100644
--- a/webapp/src/components/spaces_sidebar/space_item_menu.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {useSpaceFavoriteState, useToggleFavorite} from 'hooks/favorites';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
 import React, {useCallback, useState} from 'react';
@@ -10,12 +11,13 @@ import {copyToClipboard} from 'utils/clipboard';
 import DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';
 import ExitToAppIcon from '@mattermost/compass-icons/components/exit-to-app';
 import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
+import StarIcon from '@mattermost/compass-icons/components/star';
+import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
 
 import {leaveSpace} from 'store/actions';
 
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
 import Menu from 'components/menu/menu';
-import type {MenuItemSpec} from 'components/menu/menu_types';
 
 import type {Space} from 'types/docs';
 
@@ -29,6 +31,9 @@ const SpaceItemMenu = ({space}: Props) => {
     const {formatMessage} = useIntl();
     const dispatch = useAppDispatch();
     const {paths, spaceId, goHome} = useDocsNavigation();
+    const favoriteState = useSpaceFavoriteState(space.id);
+    const toggleFavorite = useToggleFavorite();
+    const favorited = favoriteState === 'on';
 
     const [confirmLeaveOpen, setConfirmLeaveOpen] = useState(false);
 
@@ -50,56 +55,6 @@ const SpaceItemMenu = ({space}: Props) => {
         setConfirmLeaveOpen(false);
     }, [dispatch, space.id, spaceId, goHome]);
 
-    const items: MenuItemSpec[] = [
-
-        // Favorite space is deferred until ordering/favorites persist to user
-        // preferences (spec §4, Phase B).
-        // {
-        //     id: 'favorite',
-        //     label: <FormattedMessage id='docs.sidebar.space.favorite' defaultMessage='Add to favorites'/>,
-        //     leadingIcon: <StarOutlineIcon size={18}/>,
-        //     onClick: () => onToggleFavorite(space.id),
-        // },
-
-        // Mute space is deferred until the mute feature exists.
-        // {
-        //     id: 'mute',
-        //     label: formatMessage({id: 'docs.sidebar.space.mute', defaultMessage: 'Mute space'}),
-        //     leadingIcon: <BellOutlineIcon size={18}/>,
-        // },
-        {
-            id: 'copy-link',
-            label: (
-                <FormattedMessage
-                    id='docs.sidebar.space.copyLink'
-                    defaultMessage='Copy link'
-                />
-            ),
-            leadingIcon: <LinkVariantIcon size={18}/>,
-            onClick: copyLink,
-        },
-
-        // Space settings is deferred until the settings feature exists.
-        // {
-        //     id: 'settings',
-        //     label: formatMessage({id: 'docs.sidebar.space.settings', defaultMessage: 'Space settings'}),
-        //     leadingIcon: <CogOutlineIcon size={18}/>,
-        // },
-        {
-            id: 'leave',
-            label: (
-                <FormattedMessage
-                    id='docs.sidebar.space.leave'
-                    defaultMessage='Leave space'
-                />
-            ),
-            leadingIcon: <ExitToAppIcon size={18}/>,
-            isDestructive: true,
-            hasDivider: true,
-            onClick: () => setConfirmLeaveOpen(true),
-        },
-    ];
-
     const menuLabel = formatMessage({id: 'docs.sidebar.space.menu', defaultMessage: 'Space options for {name}'}, {name: space.title});
 
     return (
@@ -107,7 +62,6 @@ const SpaceItemMenu = ({space}: Props) => {
             <Menu
                 ariaLabel={menuLabel}
                 align='right'
-                items={items}
                 tooltip={menuLabel}
                 trigger={(
                     <button
@@ -119,7 +73,52 @@ const SpaceItemMenu = ({space}: Props) => {
                         <DotsVerticalIcon size={16}/>
                     </button>
                 )}
-            />
+            >
+                {/* Mute is deferred until a mute feature exists; space settings
+                  * until that surface lands. */}
+                <Menu.Item
+                    leadingIcon={favorited ? <StarIcon size={18}/> : <StarOutlineIcon size={18}/>}
+                    secondaryLabel={favoriteState === 'partial' ? (
+                        <FormattedMessage
+                            id='docs.sidebar.space.favoritePartial'
+                            defaultMessage='Some pages are favorited'
+                        />
+                    ) : undefined}
+                    onClick={() => toggleFavorite('space', space.id)}
+                >
+                    {favorited ? (
+                        <FormattedMessage
+                            id='docs.sidebar.space.unfavorite'
+                            defaultMessage='Remove from favorites'
+                        />
+                    ) : (
+                        <FormattedMessage
+                            id='docs.sidebar.space.favorite'
+                            defaultMessage='Add to favorites'
+                        />
+                    )}
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<LinkVariantIcon size={18}/>}
+                    onClick={copyLink}
+                >
+                    <FormattedMessage
+                        id='docs.sidebar.space.copyLink'
+                        defaultMessage='Copy link'
+                    />
+                </Menu.Item>
+                <Menu.Separator/>
+                <Menu.Item
+                    leadingIcon={<ExitToAppIcon size={18}/>}
+                    destructive={true}
+                    onClick={() => setConfirmLeaveOpen(true)}
+                >
+                    <FormattedMessage
+                        id='docs.sidebar.space.leave'
+                        defaultMessage='Leave space'
+                    />
+                </Menu.Item>
+            </Menu>
             {confirmLeaveOpen && (
                 <ConfirmModal
                     title={(
diff --git a/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx b/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx
index 3e0cb6d..52b31f1 100644
--- a/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx
+++ b/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx
@@ -8,6 +8,7 @@ import {useIntl} from 'react-intl';
 
 import CreateSpaceButton from './create_space_button';
 import type {DndCategory} from './dnd/types';
+import FavoritesEmptyState from './favorites_empty_state';
 import SpaceItem from './space_item';
 import SpacesCategory from './spaces_category';
 import styles from './spaces_sidebar.module.scss';
@@ -16,12 +17,9 @@ import SpacesSidebarNav, {type DocsNavKey} from './spaces_sidebar_nav';
 import SpacesSidebarSearch from './spaces_sidebar_search';
 import {useSidebarSpaces} from './use_sidebar_spaces';
 
-// Drag-to-reorder is fully built but gated off until sidebar ordering persists
-// to user preferences (spec §4, Phase B). It writes only to component state
-// today, so a reorder is lost when the user navigates away from Docs and back —
-// shipping it non-persistent reads as broken rather than unfinished. Flip to
-// true once persistence lands. (Favorites, same phase, are commented out below.)
-const DND_ENABLED = false;
+// Drag-to-reorder and favorites both persist to user preferences now
+// (data/favorites), so the ordering survives navigation and reloads.
+const DND_ENABLED = true;
 
 type Props = {
     onOpenSwitcher: () => void;
@@ -32,7 +30,7 @@ const SpacesSidebar = ({onOpenSwitcher, onCreateSpace}: Props) => {
     const {formatMessage} = useIntl();
     const {displayName: teamName, description: teamDescription} = useTeamContext();
     const {spaceId: selectedSpaceId, goToSpace, goHome} = useDocsNavigation();
-    const {spacesById, spacesOrder} = useSidebarSpaces(DND_ENABLED);
+    const {spacesById, spacesOrder, favoriteSpaceIds, favoritesCollapsed, toggleFavoritesCollapsed} = useSidebarSpaces(DND_ENABLED);
     const [activeNav, setActiveNav] = useState<DocsNavKey>('home');
 
     const selectNav = (key: DocsNavKey) => {
@@ -76,21 +74,14 @@ const SpacesSidebar = ({onOpenSwitcher, onCreateSpace}: Props) => {
                 onSelect={selectNav}
             />
             <div className={styles.scroll}>
-                {/*
-                    Favorites category is deferred until ordering/favorites persist to
-                    user preferences (spec §4, Phase B). The model (useSidebarSpaces)
-                    still tracks favoriteOrder for drag-to-reorder; restore this block
-                    and the favorite menu item (space_item_menu) when persistence lands.
-
-                    <SpacesCategory
-                        title={formatMessage({id: 'docs.sidebar.category.favorites', defaultMessage: 'Favorites'})}
-                        collapsible={true}
-                        collapsed={favoritesCollapsed}
-                        onToggle={toggleFavoritesCollapsed}
-                    >
-                        {favoriteOrder.length === 0 ? <FavoritesEmptyState/> : favoriteOrder.map((id) => renderSpace(id, 'favorites'))}
-                    </SpacesCategory>
-                */}
+                <SpacesCategory
+                    title={formatMessage({id: 'docs.sidebar.category.favorites', defaultMessage: 'Favorites'})}
+                    collapsible={true}
+                    collapsed={favoritesCollapsed}
+                    onToggle={toggleFavoritesCollapsed}
+                >
+                    {favoriteSpaceIds.length === 0 ? <FavoritesEmptyState/> : favoriteSpaceIds.map((id) => renderSpace(id, 'favorites'))}
+                </SpacesCategory>
                 <SpacesCategory
                     title={formatMessage({id: 'docs.sidebar.category.spaces', defaultMessage: 'Spaces'})}
                     collapsible={false}
diff --git a/webapp/src/components/spaces_sidebar/spaces_sidebar_header.tsx b/webapp/src/components/spaces_sidebar/spaces_sidebar_header.tsx
index c9fef85..1dabefe 100644
--- a/webapp/src/components/spaces_sidebar/spaces_sidebar_header.tsx
+++ b/webapp/src/components/spaces_sidebar/spaces_sidebar_header.tsx
@@ -17,7 +17,6 @@ import SettingsOutlineIcon from '@mattermost/compass-icons/components/settings-o
 import {invitePeople, leaveTeam, manageMembers, openTeamSettings} from 'actions/team_menu';
 
 import Menu from 'components/menu/menu';
-import type {MenuItemSpec} from 'components/menu/menu_types';
 
 import styles from './spaces_sidebar_header.module.scss';
 
@@ -35,31 +34,12 @@ const SpacesSidebarHeader = ({teamName, teamDescription, onCreateSpace, onBrowse
     const {formatMessage} = useIntl();
     const dispatch = useAppDispatch();
 
-    const teamItems: MenuItemSpec[] = [
-        {
-            id: 'invite',
-            label: formatMessage({id: 'docs.sidebar.team.invite', defaultMessage: 'Invite people'}),
-            secondaryLabel: formatMessage({id: 'docs.sidebar.team.invite.secondary', defaultMessage: 'Add or invite people to the team'}),
-            leadingIcon: <AccountMultiplePlusOutlineIcon size={18}/>,
-            onClick: () => dispatch(invitePeople()),
-        },
-        {id: 'settings', label: formatMessage({id: 'docs.sidebar.team.settings', defaultMessage: 'Team settings'}), leadingIcon: <SettingsOutlineIcon size={18}/>, onClick: () => dispatch(openTeamSettings())},
-        {id: 'members', label: formatMessage({id: 'docs.sidebar.team.members', defaultMessage: 'Manage members'}), leadingIcon: <AccountMultipleOutlineIcon size={18}/>, onClick: () => dispatch(manageMembers())},
-        {id: 'leave', label: formatMessage({id: 'docs.sidebar.team.leave', defaultMessage: 'Leave team'}), leadingIcon: <ExitToAppIcon size={18}/>, isDestructive: true, onClick: () => dispatch(leaveTeam())},
-        {id: 'createTeam', label: formatMessage({id: 'docs.sidebar.team.createTeam', defaultMessage: 'Create a team'}), leadingIcon: <PlusIcon size={18}/>, hasDivider: true, href: CREATE_TEAM_URL},
-        {id: 'learn', label: formatMessage({id: 'docs.sidebar.team.learn', defaultMessage: 'Learn about teams'}), leadingIcon: <LightbulbOutlineIcon size={18}/>, isLink: true, hasDivider: true, href: LEARN_ABOUT_TEAMS_URL, external: true},
-    ];
-
-    const addItems: MenuItemSpec[] = [
-        {id: 'create', label: formatMessage({id: 'docs.sidebar.add.create', defaultMessage: 'Create a space'}), leadingIcon: <PlusIcon size={18}/>, onClick: onCreateSpace},
-        {id: 'browse', label: formatMessage({id: 'docs.sidebar.add.browse', defaultMessage: 'Browse spaces'}), leadingIcon: <GlobeIcon size={18}/>, onClick: onBrowseSpaces},
-    ];
+    const addMenuLabel = formatMessage({id: 'docs.sidebar.add.menu', defaultMessage: 'Add or browse spaces'});
 
     return (
         <div className={styles.root}>
             <Menu
                 ariaLabel={formatMessage({id: 'docs.sidebar.team.menu', defaultMessage: 'Manage {teamName}'}, {teamName})}
-                items={teamItems}
                 tooltip={teamDescription || teamName}
                 trigger={(
                     <button
@@ -70,22 +50,76 @@ const SpacesSidebarHeader = ({teamName, teamDescription, onCreateSpace, onBrowse
                         <ChevronDownIcon size={16}/>
                     </button>
                 )}
-            />
+            >
+                <Menu.Item
+                    leadingIcon={<AccountMultiplePlusOutlineIcon size={18}/>}
+                    secondaryLabel={formatMessage({id: 'docs.sidebar.team.invite.secondary', defaultMessage: 'Add or invite people to the team'})}
+                    onClick={() => dispatch(invitePeople())}
+                >
+                    {formatMessage({id: 'docs.sidebar.team.invite', defaultMessage: 'Invite people'})}
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<SettingsOutlineIcon size={18}/>}
+                    onClick={() => dispatch(openTeamSettings())}
+                >
+                    {formatMessage({id: 'docs.sidebar.team.settings', defaultMessage: 'Team settings'})}
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<AccountMultipleOutlineIcon size={18}/>}
+                    onClick={() => dispatch(manageMembers())}
+                >
+                    {formatMessage({id: 'docs.sidebar.team.members', defaultMessage: 'Manage members'})}
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<ExitToAppIcon size={18}/>}
+                    destructive={true}
+                    onClick={() => dispatch(leaveTeam())}
+                >
+                    {formatMessage({id: 'docs.sidebar.team.leave', defaultMessage: 'Leave team'})}
+                </Menu.Item>
+                <Menu.Separator/>
+                <Menu.LinkItem
+                    href={CREATE_TEAM_URL}
+                    leadingIcon={<PlusIcon size={18}/>}
+                >
+                    {formatMessage({id: 'docs.sidebar.team.createTeam', defaultMessage: 'Create a team'})}
+                </Menu.LinkItem>
+                <Menu.Separator/>
+                <Menu.LinkItem
+                    href={LEARN_ABOUT_TEAMS_URL}
+                    external={true}
+                    leadingIcon={<LightbulbOutlineIcon size={18}/>}
+                >
+                    {formatMessage({id: 'docs.sidebar.team.learn', defaultMessage: 'Learn about teams'})}
+                </Menu.LinkItem>
+            </Menu>
             <Menu
-                ariaLabel={formatMessage({id: 'docs.sidebar.add.menu', defaultMessage: 'Add or browse spaces'})}
+                ariaLabel={addMenuLabel}
                 align='right'
-                items={addItems}
-                tooltip={formatMessage({id: 'docs.sidebar.add.menu', defaultMessage: 'Add or browse spaces'})}
+                tooltip={addMenuLabel}
                 trigger={(
                     <button
                         type='button'
                         className={styles.add}
-                        aria-label={formatMessage({id: 'docs.sidebar.add.menu', defaultMessage: 'Add or browse spaces'})}
+                        aria-label={addMenuLabel}
                     >
                         <PlusIcon size={16}/>
                     </button>
                 )}
-            />
+            >
+                <Menu.Item
+                    leadingIcon={<PlusIcon size={18}/>}
+                    onClick={onCreateSpace}
+                >
+                    {formatMessage({id: 'docs.sidebar.add.create', defaultMessage: 'Create a space'})}
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<GlobeIcon size={18}/>}
+                    onClick={onBrowseSpaces}
+                >
+                    {formatMessage({id: 'docs.sidebar.add.browse', defaultMessage: 'Browse spaces'})}
+                </Menu.Item>
+            </Menu>
         </div>
     );
 };
diff --git a/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts b/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts
index ad10ebf..0ce9c4a 100644
--- a/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts
+++ b/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts
@@ -1,91 +1,132 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {favoriteKey} from 'data/favorites';
+import type {FavoriteType, SidebarOrder} from 'data/favorites';
+import {useSidebarOrder, useToggleFavorite} from 'hooks/favorites';
+import {useAppSelector} from 'hooks/redux';
 import {useSpaces} from 'hooks/spaces';
-import {useEffect, useMemo, useState} from 'react';
+import {useTeamContext} from 'hooks/team';
+import {useCallback, useMemo, useState} from 'react';
+
+import {getDocsFavoriteSpaceIds, getDocsFavoriteTypes} from 'store/favorites';
 
 import type {Space} from 'types/docs';
 
 import type {DndCategory} from './dnd/types';
 import {useSpacesDnd} from './dnd/use_spaces_dnd';
 
-const moveBetween = (
-    favoriteOrder: string[],
-    spacesOrder: string[],
-    spaceId: string,
-    to: DndCategory,
-    index: number,
-) => {
-    const fav = favoriteOrder.filter((id) => id !== spaceId);
-    const spaces = spacesOrder.filter((id) => id !== spaceId);
-    const target = to === 'favorites' ? fav : spaces;
-    target.splice(Math.max(0, Math.min(index, target.length)), 0, spaceId);
-    return {favoriteOrder: fav, spacesOrder: spaces};
-};
-
-// Prunes ids no longer live and returns the same array reference when nothing
-// changed, so callers can bail out of a state update without a re-render.
-const pruneOrder = (order: string[], liveIds: Set<string>): string[] => {
-    const pruned = order.filter((id) => liveIds.has(id));
-    return pruned.length === order.length ? order : pruned;
+// Applies a move of `key` into `to` at `index`, dropping it from both lists first
+// so a cross-category move can't leave a duplicate behind.
+const moveBetween = (order: SidebarOrder, key: string, to: DndCategory, index: number): SidebarOrder => {
+    const favorites = order.favorites.filter((entry) => entry !== key);
+    const spaces = order.spaces.filter((entry) => entry !== key);
+    const target = to === 'favorites' ? favorites : spaces;
+    target.splice(Math.max(0, Math.min(index, target.length)), 0, key);
+    return {favorites, spaces};
 };
 
 export type SidebarSpacesModel = {
     spacesById: Map<string, Space>;
-    favoriteOrder: string[];
+
+    /**
+     * Spaces in the favorites category, in display order: favorited outright, or
+     * holding a favorited page. Favorited pages themselves are surfaced in the
+     * page tree rather than here.
+     */
+    favoriteSpaceIds: string[];
     spacesOrder: string[];
     favoritesCollapsed: boolean;
     toggleFavoritesCollapsed: () => void;
     toggleFavorite: (id: string) => void;
 };
 
-// Holds ordering/favorites in local state today; these move to user
-// preferences in a later phase. `dndEnabled` gates the drag-to-
-// reorder monitor until that persistence exists (see SpacesSidebar).
+/**
+ * Composes the sidebar's display model from the space list, the user's favorites,
+ * and their manual ordering (both persisted as user preferences).
+ *
+ * Order is derived, not trusted: the stored list is a hint, filtered to what's
+ * live and then extended with anything it hasn't seen. So a stale entry can't
+ * hide a space, and a newly created one still appears.
+ */
 export function useSidebarSpaces(dndEnabled: boolean): SidebarSpacesModel {
     const spaces = useSpaces();
-    const [favoriteOrder, setFavoriteOrder] = useState<string[]>([]);
-    const [spacesOrder, setSpacesOrder] = useState<string[]>(() => spaces.map((s) => s.id));
+    const {id: teamId} = useTeamContext();
+    const toggleFavoritePreference = useToggleFavorite();
+    const {order, setOrder} = useSidebarOrder(teamId);
     const [favoritesCollapsed, setFavoritesCollapsed] = useState(false);
 
     const spacesById = useMemo(() => new Map(spaces.map((s) => [s.id, s])), [spaces]);
 
-    // The space set is now reactive (creates/deletes flow through the store),
-    // so reconcile the locally-owned order lists against it: prune ids that no
-    // longer exist, and append ids we haven't seen yet. Guarded so a no-op
-    // update returns the same reference and doesn't retrigger the effect.
-    useEffect(() => {
-        const liveIds = new Set(spaces.map((s) => s.id));
-
-        setFavoriteOrder((prev) => pruneOrder(prev, liveIds));
+    const allFavoriteSpaceIds = useAppSelector(getDocsFavoriteSpaceIds);
 
-        setSpacesOrder((prev) => {
-            const pruned = pruneOrder(prev, liveIds);
-            const tracked = new Set([...pruned, ...favoriteOrder]);
-            const additions = spaces.map((s) => s.id).filter((id) => !tracked.has(id));
-            return additions.length === 0 ? pruned : [...pruned, ...additions];
+    // Sorts ids by their position in the stored order, keeping anything the
+    // stored order hasn't seen at the end (in its natural order).
+    const applyStoredOrder = useCallback((ids: string[], storedKeys: string[], prefix: string) => {
+        const position = new Map<string, number>();
+        storedKeys.forEach((key, index) => {
+            if (key.startsWith(prefix)) {
+                position.set(key.slice(prefix.length), index);
+            }
         });
-    }, [spaces, favoriteOrder]);
+        return [...ids].sort((a, b) => (position.get(a) ?? Number.MAX_SAFE_INTEGER) - (position.get(b) ?? Number.MAX_SAFE_INTEGER));
+    }, []);
 
-    const applyMove = (spaceId: string, from: DndCategory, to: DndCategory, index: number) => {
-        const next = moveBetween(favoriteOrder, spacesOrder, spaceId, to, index);
-        setFavoriteOrder(next.favoriteOrder);
-        setSpacesOrder(next.spacesOrder);
-    };
+    // Favorites are a user preference, so the stored list spans every team (and
+    // can name a space that's been left or deleted). Scoping it to the team's
+    // loaded spaces here is what makes the counts downstream honest — an
+    // out-of-team favorite has no row to render, so counting it would leave the
+    // favorites category looking populated while showing nothing.
+    const favoriteSpaceIds = useMemo(
+        () => applyStoredOrder(allFavoriteSpaceIds.filter((id) => spacesById.has(id)), order.favorites, 'space:'),
+        [allFavoriteSpaceIds, spacesById, order.favorites, applyStoredOrder],
+    );
 
-    const toggleFavorite = (id: string) => {
-        if (favoriteOrder.includes(id)) {
-            applyMove(id, 'favorites', 'spaces', spacesOrder.length);
-        } else {
-            applyMove(id, 'spaces', 'favorites', favoriteOrder.length);
+    // Spaces that aren't favorited, in stored order, then the rest.
+    const spacesOrder = useMemo(() => {
+        const shownInFavorites = new Set(favoriteSpaceIds);
+        const eligible = spaces.map((s) => s.id).filter((id) => !shownInFavorites.has(id));
+        const eligibleSet = new Set(eligible);
+        const ordered = order.spaces.filter((id) => eligibleSet.has(id));
+        const seen = new Set(ordered);
+        return [...ordered, ...eligible.filter((id) => !seen.has(id))];
+    }, [spaces, favoriteSpaceIds, order.spaces]);
+
+    // Map lookup, not a scan: this runs per drag over a list that can be large.
+    const favoriteTypes = useAppSelector(getDocsFavoriteTypes);
+    const typeOf = useCallback(
+        (id: string): FavoriteType => favoriteTypes.get(id) ?? 'space',
+        [favoriteTypes],
+    );
+
+    // The drag layer works in plain ids (only spaces are draggable), so the id is
+    // mapped back to its stored key here. A cross-category move also flips
+    // favorite membership — in core, favoriting *is* a move between categories.
+    const applyMove = useCallback((id: string, from: DndCategory, to: DndCategory, index: number) => {
+        // Only spaces are ordered here, so only space keys are persisted.
+        const favoriteKeys = favoriteSpaceIds.map((spaceId) => favoriteKey({type: 'space', id: spaceId}));
+        const stored: SidebarOrder = {favorites: favoriteKeys, spaces: spacesOrder};
+        setOrder(moveBetween(stored, favoriteKey({type: typeOf(id), id}), to, index));
+
+        if (from !== to) {
+            toggleFavoritePreference(typeOf(id), id);
         }
-    };
+    }, [setOrder, favoriteSpaceIds, spacesOrder, typeOf, toggleFavoritePreference]);
+
+    const toggleFavorite = useCallback((id: string) => toggleFavoritePreference('space', id), [toggleFavoritePreference]);
 
-    useSpacesDnd({favoriteOrder, spacesOrder, onReorder: applyMove, enabled: dndEnabled});
+    // Projected to plain ids so the monitor's indexOf matches the drag payload;
+    // indices still line up with the key list, which is the same list projected.
+    useSpacesDnd({
+        favoriteOrder: favoriteSpaceIds,
+        spacesOrder,
+        onReorder: applyMove,
+        enabled: dndEnabled,
+    });
 
     return {
         spacesById,
-        favoriteOrder,
+        favoriteSpaceIds,
         spacesOrder,
         favoritesCollapsed,
         toggleFavoritesCollapsed: () => setFavoritesCollapsed((v) => !v),
diff --git a/webapp/src/components/tabs/tabs.module.scss b/webapp/src/components/tabs/tabs.module.scss
new file mode 100644
index 0000000..c044a71
--- /dev/null
+++ b/webapp/src/components/tabs/tabs.module.scss
@@ -0,0 +1,92 @@
+.root {
+    display: flex;
+    min-height: 0;
+}
+
+.horizontal {
+    flex-direction: column;
+}
+
+.vertical {
+    flex-direction: row;
+}
+
+.list {
+    display: flex;
+    gap: 8px;
+
+    // Each tab is a `.btn`; core's global `.btn + .btn { margin-left: 8px }`
+    // keys off DOM adjacency and would indent every tab after the first (and
+    // toggles as Base UI mounts focus guards). Spacing here comes from `gap`.
+    :global(.btn + .btn) {
+        margin-left: 0;
+    }
+}
+
+.horizontal .list {
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+.vertical .list {
+    flex-direction: column;
+}
+
+// Tabs are quaternary Buttons (accent-blue by default); scope under
+// `.btn.btn-quaternary` so these win over core's button color/padding.
+.tab:global(.btn.btn-quaternary) {
+    justify-content: flex-start;
+    height: auto;
+    min-height: 32px;
+    gap: 8px;
+    padding: 8px 12px;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-weight: 600;
+    text-align: left;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.75);
+    }
+
+    &[data-active] {
+        background: rgba(var(--button-bg-rgb), 0.08);
+        color: var(--button-bg);
+    }
+}
+
+.vertical .tab:global(.btn.btn-quaternary) {
+    width: 100%;
+}
+
+// Destructive tab (e.g. "Archive space") reads red in every state.
+.tabDestructive:global(.btn.btn-quaternary) {
+    color: var(--error-text);
+
+    &:hover,
+    &[data-active] {
+        background: rgba(var(--error-text-color-rgb), 0.08);
+        color: var(--error-text);
+    }
+}
+
+.tabLabel {
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.separator {
+    flex-shrink: 0;
+    height: 1px;
+    margin: 8px 0;
+    background: rgba(var(--center-channel-color-rgb), 0.12);
+}
+
+.panel {
+    min-width: 0;
+}
diff --git a/webapp/src/components/tabs/tabs.tsx b/webapp/src/components/tabs/tabs.tsx
new file mode 100644
index 0000000..56b2640
--- /dev/null
+++ b/webapp/src/components/tabs/tabs.tsx
@@ -0,0 +1,98 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Tabs as BaseTabs} from '@base-ui-components/react/tabs';
+import classNames from 'classnames';
+import React from 'react';
+
+import {Button} from 'components/form_controls/button';
+
+import styles from './tabs.module.scss';
+
+// Base UI Tabs give real tablist/tab/tabpanel semantics and arrow-key roving
+// focus for free; each tab renders as our shared Button. Core's global
+// `.btn + .btn { margin-left }` would then indent every tab after the first, so
+// the list container zeroes that margin and spaces tabs with `gap` instead.
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+
+type TabsProps = {
+    value: string;
+    onValueChange: (value: string) => void;
+    orientation?: TabsOrientation;
+    className?: string;
+    children: React.ReactNode;
+};
+
+export const Tabs = ({value, onValueChange, orientation = 'horizontal', className, children}: TabsProps) => (
+    <BaseTabs.Root
+        value={value}
+        onValueChange={(next) => onValueChange(String(next))}
+        orientation={orientation}
+        className={classNames(styles.root, styles[orientation], className)}
+    >
+        {children}
+    </BaseTabs.Root>
+);
+
+type TabListProps = {
+    className?: string;
+    'aria-label'?: string;
+    children: React.ReactNode;
+};
+
+export const TabList = ({className, children, ...rest}: TabListProps) => (
+    <BaseTabs.List
+        className={classNames(styles.list, className)}
+        {...rest}
+    >
+        {children}
+    </BaseTabs.List>
+);
+
+type TabProps = {
+    value: string;
+    leadingIcon?: React.ReactNode;
+    destructive?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+
+export const Tab = ({value, leadingIcon, destructive = false, className, children}: TabProps) => (
+    <BaseTabs.Tab
+        value={value}
+        render={(
+            <Button
+                emphasis='quaternary'
+                size='sm'
+                leadingIcon={leadingIcon}
+                className={classNames(styles.tab, {[styles.tabDestructive]: destructive}, className)}
+            >
+                <span className={styles.tabLabel}>{children}</span>
+            </Button>
+        )}
+    />
+);
+
+type TabPanelProps = {
+    value: string;
+    className?: string;
+    children: React.ReactNode;
+};
+
+export const TabPanel = ({value, className, children}: TabPanelProps) => (
+    <BaseTabs.Panel
+        value={value}
+        className={classNames(styles.panel, className)}
+    >
+        {children}
+    </BaseTabs.Panel>
+);
+
+/** Non-interactive visual separator between groups of tabs in a `TabList`. */
+export const TabsSeparator = () => (
+    <div
+        className={styles.separator}
+        role='presentation'
+    />
+);
diff --git a/webapp/src/components/toast/docs_toaster.module.scss b/webapp/src/components/toast/docs_toaster.module.scss
new file mode 100644
index 0000000..96456dd
--- /dev/null
+++ b/webapp/src/components/toast/docs_toaster.module.scss
@@ -0,0 +1,105 @@
+// Above the modal layer so toasts raised by modal actions stay visible, but
+// below tooltips.
+.viewport {
+    position: fixed;
+    z-index: var(--z-index-popover);
+    right: 24px;
+    bottom: 24px;
+    display: flex;
+
+    // Toasts arrive newest-first, so reversing puts the newest nearest the
+    // corner it animates in from.
+    flex-direction: column-reverse;
+    gap: 8px;
+    width: 386px;
+    max-width: calc(100vw - 48px);
+}
+
+.toast {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 20px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    background: var(--center-channel-bg);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+}
+
+.icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+}
+
+.success .icon {
+    color: var(--online-indicator);
+}
+
+.error .icon {
+    color: var(--error-text);
+}
+
+.warning .icon {
+    color: var(--away-indicator);
+}
+
+.info .icon {
+    color: var(--button-bg);
+}
+
+.body {
+    display: flex;
+    min-width: 0;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: 8px;
+    padding-right: 24px;
+    padding-left: 4px;
+}
+
+.title {
+    margin: 0;
+    color: var(--center-channel-color);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    word-break: break-word;
+}
+
+.description {
+    margin: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    word-break: break-word;
+}
+
+.close {
+    position: absolute;
+    top: 11px;
+    right: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+    }
+}
diff --git a/webapp/src/components/toast/docs_toaster.test.tsx b/webapp/src/components/toast/docs_toaster.test.tsx
new file mode 100644
index 0000000..c9a460d
--- /dev/null
+++ b/webapp/src/components/toast/docs_toaster.test.tsx
@@ -0,0 +1,67 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {act, fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import DocsToaster from './docs_toaster';
+import {toast} from './toast';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+// Base UI mirrors each toast's text into a visually hidden live region and marks
+// the visual toast aria-hidden while the window is unfocused (always, in jsdom),
+// so queries here match all copies and cannot go through accessible roles.
+const closeButton = () => screen.getByLabelText('Close');
+
+describe('DocsToaster', () => {
+    it('renders a toast raised through the imperative API', () => {
+        renderWithContext(<DocsToaster/>);
+
+        act(() => {
+            toast.success('Space created');
+        });
+
+        expect(screen.getAllByText('Space created').length).toBeGreaterThan(0);
+    });
+
+    it('renders the description', () => {
+        renderWithContext(<DocsToaster/>);
+
+        act(() => {
+            toast.error('Could not leave space', {description: 'Add another member first.'});
+        });
+
+        expect(screen.getAllByText('Could not leave space').length).toBeGreaterThan(0);
+        expect(screen.getAllByText('Add another member first.').length).toBeGreaterThan(0);
+    });
+
+    it('dismisses via the close button', () => {
+        renderWithContext(<DocsToaster/>);
+
+        act(() => {
+            toast.info('Heads up');
+        });
+
+        act(() => {
+            fireEvent.click(closeButton());
+        });
+
+        expect(screen.queryByText('Heads up')).not.toBeInTheDocument();
+    });
+
+    it('dismisses by id', () => {
+        renderWithContext(<DocsToaster/>);
+
+        let id = '';
+        act(() => {
+            id = toast.warning('Almost out of space');
+        });
+
+        act(() => {
+            toast.dismiss(id);
+        });
+
+        expect(screen.queryByText('Almost out of space')).not.toBeInTheDocument();
+    });
+});
diff --git a/webapp/src/components/toast/docs_toaster.tsx b/webapp/src/components/toast/docs_toaster.tsx
new file mode 100644
index 0000000..d912006
--- /dev/null
+++ b/webapp/src/components/toast/docs_toaster.tsx
@@ -0,0 +1,79 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Toast} from '@base-ui-components/react/toast';
+import classNames from 'classnames';
+import React from 'react';
+import {useIntl} from 'react-intl';
+
+import AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';
+import AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';
+import CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';
+import CloseIcon from '@mattermost/compass-icons/components/close';
+import InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';
+import type IconProps from '@mattermost/compass-icons/components/props';
+
+import styles from './docs_toaster.module.scss';
+import {docsToastManager} from './toast';
+import type {DocsToastVariant} from './toast';
+
+const VARIANT_ICONS: Record<DocsToastVariant, React.FC<IconProps>> = {
+    success: CheckCircleOutlineIcon,
+    error: AlertCircleOutlineIcon,
+    warning: AlertOutlineIcon,
+    info: InformationOutlineIcon,
+};
+
+const variantOf = (type: string | undefined): DocsToastVariant => (
+    type && type in VARIANT_ICONS ? type as DocsToastVariant : 'info'
+);
+
+const DocsToastList = () => {
+    const {toasts} = Toast.useToastManager();
+    const {formatMessage} = useIntl();
+
+    return (
+        <Toast.Viewport className={styles.viewport}>
+            {toasts.map((toast) => {
+                const variant = variantOf(toast.type);
+                const Icon = VARIANT_ICONS[variant];
+
+                return (
+                    <Toast.Root
+                        key={toast.id}
+                        toast={toast}
+                        className={classNames(styles.toast, styles[variant])}
+                    >
+                        <span className={styles.icon}>
+                            <Icon size={20}/>
+                        </span>
+                        <div className={styles.body}>
+                            <Toast.Title className={styles.title}/>
+                            <Toast.Description className={styles.description}/>
+                        </div>
+                        <Toast.Close
+                            className={styles.close}
+                            aria-label={formatMessage({id: 'docs.toast.close', defaultMessage: 'Close'})}
+                        >
+                            <CloseIcon size={16}/>
+                        </Toast.Close>
+                    </Toast.Root>
+                );
+            })}
+        </Toast.Viewport>
+    );
+};
+
+/**
+ * Renders the Docs product's toasts. Mount exactly once, at the Docs root; all
+ * toasts are raised through the `toast` API or `useToast()`.
+ */
+const DocsToaster = () => (
+    <Toast.Provider toastManager={docsToastManager}>
+        <Toast.Portal>
+            <DocsToastList/>
+        </Toast.Portal>
+    </Toast.Provider>
+);
+
+export default DocsToaster;
diff --git a/webapp/src/components/toast/index.ts b/webapp/src/components/toast/index.ts
new file mode 100644
index 0000000..6e96f6e
--- /dev/null
+++ b/webapp/src/components/toast/index.ts
@@ -0,0 +1,6 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export {default as DocsToaster} from './docs_toaster';
+export {toast, useToast, docsToastManager} from './toast';
+export type {DocsToastApi, DocsToastOptions, DocsToastVariant} from './toast';
diff --git a/webapp/src/components/toast/toast.ts b/webapp/src/components/toast/toast.ts
new file mode 100644
index 0000000..18d4157
--- /dev/null
+++ b/webapp/src/components/toast/toast.ts
@@ -0,0 +1,76 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Toast} from '@base-ui-components/react/toast';
+import {useMemo} from 'react';
+import type {ReactNode} from 'react';
+
+export type DocsToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+export type DocsToastOptions = {
+    description?: ReactNode;
+
+    /** Milliseconds before auto-dismiss; `0` keeps the toast until dismissed. */
+    timeout?: number;
+    priority?: 'low' | 'high';
+    onClose?: () => void;
+};
+
+export type DocsToastApi = {
+    success: (title: ReactNode, options?: DocsToastOptions) => string;
+    error: (title: ReactNode, options?: DocsToastOptions) => string;
+    warning: (title: ReactNode, options?: DocsToastOptions) => string;
+    info: (title: ReactNode, options?: DocsToastOptions) => string;
+    dismiss: (id: string) => void;
+};
+
+type AddToast = (options: DocsToastOptions & {title: ReactNode; type: DocsToastVariant}) => string;
+type CloseToast = (id: string) => void;
+
+// Failures are announced urgently by default; the rest stay polite.
+const DEFAULT_PRIORITY: Record<DocsToastVariant, 'low' | 'high'> = {
+    success: 'low',
+    error: 'high',
+    warning: 'high',
+    info: 'low',
+};
+
+const createToastApi = (add: AddToast, close: CloseToast): DocsToastApi => {
+    const show = (type: DocsToastVariant) => (title: ReactNode, options?: DocsToastOptions) => add({
+        ...options,
+        title,
+        type,
+        priority: options?.priority ?? DEFAULT_PRIORITY[type],
+    });
+
+    return {
+        success: show('success'),
+        error: show('error'),
+        warning: show('warning'),
+        info: show('info'),
+        dismiss: close,
+    };
+};
+
+/**
+ * The Docs product's toast manager. `<DocsToaster/>` binds to it; prefer the
+ * `toast` API or `useToast()` over using this directly.
+ */
+export const docsToastManager = Toast.createToastManager();
+
+/**
+ * Imperative toast API usable anywhere — actions, thunks, event handlers — with
+ * no hook and no React context. Requires `<DocsToaster/>` to be mounted (it is,
+ * at the Docs root).
+ */
+export const toast: DocsToastApi = createToastApi(
+    (options) => docsToastManager.add(options),
+    (id) => docsToastManager.close(id),
+);
+
+/** Hook flavour of {@link toast} for components that prefer hooks. */
+export const useToast = (): DocsToastApi => {
+    const {add, close} = Toast.useToastManager();
+
+    return useMemo(() => createToastApi(add, close), [add, close]);
+};
diff --git a/webapp/src/data/api_data_source.ts b/webapp/src/data/api_data_source.ts
index 28b39d1..bc47a98 100644
--- a/webapp/src/data/api_data_source.ts
+++ b/webapp/src/data/api_data_source.ts
@@ -3,13 +3,19 @@
 
 import {apiUrl, listAll, restDelete, restGet, restPatch, restPost} from 'client/rest';
 
-import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdateSpacePatch} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdatePagePatch, UpdateSpacePatch} from 'types/docs';
 
 import type {DocsDataSource} from './docs_data_source';
 
 // The server's page list returns summaries (no body/delete_at); fill the fields
 // the store's Page type needs so a summary is a valid, body-less Page.
-const toPage = (summary: Page): Page => ({...summary, body: summary.body ?? '', delete_at: summary.delete_at ?? 0});
+const toPage = (summary: Page): Page => ({
+    ...summary,
+    body: summary.body ?? '',
+    delete_at: summary.delete_at ?? 0,
+    user_id: summary.user_id ?? '',
+    last_modified_by: summary.last_modified_by ?? '',
+});
 
 // Docs data over the plugin REST API (server/api.go). Ids are opaque; lists are
 // paginated ({items, has_more}) and followed to completion by listAll.
@@ -28,6 +34,7 @@ export const apiDataSource: DocsDataSource = {
         title: patch.title?.trim(),
         description: patch.description?.trim(),
         icon: patch.icon,
+        props: patch.props,
         expected_update_at: expectedUpdateAt,
     }),
 
@@ -58,4 +65,15 @@ export const apiDataSource: DocsDataSource = {
         });
         return toPage(created);
     },
+
+    updatePage: async (spaceId, pageId, patch: UpdatePagePatch, baseEditAt) => {
+        const updated = await restPatch<Page>(`${apiUrl()}/spaces/${spaceId}/pages/${pageId}`, {
+            title: patch.title?.trim(),
+            body: patch.body,
+            base_edit_at: baseEditAt,
+        });
+        return toPage(updated);
+    },
+
+    deletePage: (spaceId, pageId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}/pages/${pageId}`),
 };
diff --git a/webapp/src/data/collapsed_pages.ts b/webapp/src/data/collapsed_pages.ts
index e6a6788..03b58da 100644
--- a/webapp/src/data/collapsed_pages.ts
+++ b/webapp/src/data/collapsed_pages.ts
@@ -47,3 +47,18 @@ export function toggleCollapsed(userId: string, pageId: string): Set<string> {
     write(userId, [...next]);
     return next;
 }
+
+// Sets the collapsed state for many pages at once (a subtree). Backs shift-click
+// expand/collapse-all on a node.
+export function setCollapsedFor(userId: string, ids: string[], collapsed: boolean): Set<string> {
+    const next = getCollapsed(userId);
+    for (const id of ids) {
+        if (collapsed) {
+            next.add(id);
+        } else {
+            next.delete(id);
+        }
+    }
+    write(userId, [...next]);
+    return next;
+}
diff --git a/webapp/src/data/docs_data_source.ts b/webapp/src/data/docs_data_source.ts
index 188562b..89b37e6 100644
--- a/webapp/src/data/docs_data_source.ts
+++ b/webapp/src/data/docs_data_source.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdateSpacePatch} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdatePagePatch, UpdateSpacePatch} from 'types/docs';
 
 // The seam between the store's thunks and the Docs server REST API. The
 // API-backed source implements this over the plugin's /api/v1 routes; the
@@ -55,4 +55,12 @@ export interface DocsDataSource {
     // Creates a page in a space (optionally under a parent) and returns it (with
     // its server-assigned id and sort_order).
     createPage(spaceId: string, input: CreatePageInput): Promise<Page>;
+
+    // Patches a page's editable fields (title/body) and returns the updated page.
+    // `baseEditAt` is the page's current edit_at, the optimistic-lock baseline:
+    // the server rejects a stale baseline (409) and a missing one (400).
+    updatePage(spaceId: string, pageId: string, patch: UpdatePagePatch, baseEditAt: number): Promise<Page>;
+
+    // Deletes (soft-deletes) a page and, on the server, its subpages.
+    deletePage(spaceId: string, pageId: string): Promise<void>;
 }
diff --git a/webapp/src/data/favorites.test.ts b/webapp/src/data/favorites.test.ts
new file mode 100644
index 0000000..50208ad
--- /dev/null
+++ b/webapp/src/data/favorites.test.ts
@@ -0,0 +1,73 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {
+    EMPTY_SIDEBAR_ORDER,
+    FAVORITES_CATEGORY,
+    MAX_PREFERENCE_VALUE_LENGTH,
+    SIDEBAR_ORDER_CATEGORY,
+    favoriteKey,
+    parseFavorite,
+    parseFavoriteKey,
+    parseSidebarOrder,
+    serializeSidebarOrder,
+} from './favorites';
+
+describe('favorites preference keys', () => {
+    // The server rejects a preference whose category or name exceeds 32 chars,
+    // and ids are 26-char platform ids.
+    it('keeps category names within the preference limit', () => {
+        expect(FAVORITES_CATEGORY.length).toBeLessThanOrEqual(32);
+        expect(SIDEBAR_ORDER_CATEGORY.length).toBeLessThanOrEqual(32);
+    });
+
+    it('parses a stored favorite, rejecting unknown types', () => {
+        expect(parseFavorite('abc', 'space')).toEqual({type: 'space', id: 'abc'});
+        expect(parseFavorite('abc', 'page')).toEqual({type: 'page', id: 'abc'});
+        expect(parseFavorite('abc', 'channel')).toBeNull();
+    });
+
+    it('round-trips a favorite key', () => {
+        const ref = {type: 'page' as const, id: 'p1'};
+        expect(parseFavoriteKey(favoriteKey(ref))).toEqual(ref);
+    });
+
+    it('rejects malformed favorite keys', () => {
+        expect(parseFavoriteKey('p1')).toBeNull();
+        expect(parseFavoriteKey('bogus:p1')).toBeNull();
+        expect(parseFavoriteKey('page:')).toBeNull();
+    });
+});
+
+describe('sidebar order', () => {
+    it('round-trips an order', () => {
+        const order = {favorites: ['space:a', 'page:b'], spaces: ['c']};
+        expect(parseSidebarOrder(serializeSidebarOrder(order))).toEqual(order);
+    });
+
+    it('falls back to empty for missing or corrupt values', () => {
+        expect(parseSidebarOrder(undefined)).toEqual(EMPTY_SIDEBAR_ORDER);
+        expect(parseSidebarOrder('not json')).toEqual(EMPTY_SIDEBAR_ORDER);
+    });
+
+    // A rejected preference would lose the whole order, so an oversized list is
+    // trimmed to fit instead.
+    it('caps the payload under the server value limit', () => {
+        const many = Array.from({length: 5000}, (_, i) => `space:${String(i).padStart(26, '0')}`);
+        const serialized = serializeSidebarOrder({favorites: many, spaces: many});
+
+        expect(serialized.length).toBeLessThanOrEqual(MAX_PREFERENCE_VALUE_LENGTH);
+
+        // What survives is still a valid, parseable prefix of the order.
+        const parsed = parseSidebarOrder(serialized);
+        expect(parsed.favorites.length).toBeGreaterThan(0);
+        expect(parsed.favorites[0]).toBe(many[0]);
+    });
+
+    it('drops non-string entries rather than trusting the payload', () => {
+        expect(parseSidebarOrder('{"favorites":["a",5,null],"spaces":"nope"}')).toEqual({
+            favorites: ['a'],
+            spaces: [],
+        });
+    });
+});
diff --git a/webapp/src/data/favorites.ts b/webapp/src/data/favorites.ts
new file mode 100644
index 0000000..4c5d48e
--- /dev/null
+++ b/webapp/src/data/favorites.ts
@@ -0,0 +1,107 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// Docs sidebar favorites and ordering, stored as Mattermost user preferences.
+//
+// Core's channel sidebar keeps this in a first-class server model (ChannelCategory:
+// per-user, per-team, with an ordered channel_ids list), and favoriting a channel
+// is a move into the category of type `favorites`. The Docs server has no category
+// model, so this uses the user-preferences API instead — the same class of
+// mechanism (per-user sidebar state synced by the server) without inventing a
+// Docs categories endpoint.
+//
+// Preference field limits are category ≤ 32 chars, name ≤ 32 chars, so both keys
+// below fit a 26-char platform id with room to spare.
+
+/** One preference per favorited item: name = item id, value = FavoriteType. */
+export const FAVORITES_CATEGORY = 'docs_favorites';
+
+/** One preference per team: name = team id, value = a serialized SidebarOrder. */
+export const SIDEBAR_ORDER_CATEGORY = 'docs_sidebar_order';
+
+/**
+ * What kind of thing a favorite points at. New kinds are additive: they are just
+ * a new preference `value`, needing no migration.
+ */
+export type FavoriteType = 'space' | 'page';
+
+export type FavoriteRef = {
+    type: FavoriteType;
+    id: string;
+};
+
+const FAVORITE_TYPES: FavoriteType[] = ['space', 'page'];
+
+const isFavoriteType = (value: string): value is FavoriteType => (FAVORITE_TYPES as string[]).includes(value);
+
+/** Parses a stored preference pair, or null when the value isn't a known type. */
+export function parseFavorite(name: string, value: string): FavoriteRef | null {
+    return isFavoriteType(value) ? {type: value, id: name} : null;
+}
+
+// Favorites can mix types, so their order is keyed by "type:id"; the plain
+// spaces category only ever holds space ids.
+export const favoriteKey = ({type, id}: FavoriteRef): string => `${type}:${id}`;
+
+export function parseFavoriteKey(key: string): FavoriteRef | null {
+    const separator = key.indexOf(':');
+    if (separator === -1) {
+        return null;
+    }
+    const type = key.slice(0, separator);
+    const id = key.slice(separator + 1);
+    return id && isFavoriteType(type) ? {type, id} : null;
+}
+
+export type SidebarOrder = {
+    favorites: string[];
+    spaces: string[];
+};
+
+export const EMPTY_SIDEBAR_ORDER: SidebarOrder = {favorites: [], spaces: []};
+
+const asStringArray = (value: unknown): string[] =>
+    (Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === 'string') : []);
+
+/** Tolerates absent/corrupt values by falling back to an empty order. */
+export function parseSidebarOrder(value?: string): SidebarOrder {
+    if (!value) {
+        return EMPTY_SIDEBAR_ORDER;
+    }
+    try {
+        const parsed = JSON.parse(value) as Partial<SidebarOrder>;
+        return {
+            favorites: asStringArray(parsed.favorites),
+            spaces: asStringArray(parsed.spaces),
+        };
+    } catch {
+        return EMPTY_SIDEBAR_ORDER;
+    }
+}
+
+// The server rejects a preference value over MaxPreferenceValueLength (20000
+// chars), which a stored order would hit at roughly 550 entries. Manual order
+// only matters for what the user actually dragged, so the payload is capped and
+// trimmed from the tail (the least-recently-positioned end); anything dropped
+// falls back to the natural order rather than failing the whole save.
+export const MAX_PREFERENCE_VALUE_LENGTH = 20000;
+
+// Leaves headroom under the server limit for JSON overhead.
+const ORDER_BUDGET = MAX_PREFERENCE_VALUE_LENGTH - 1000;
+
+export function serializeSidebarOrder(order: SidebarOrder): string {
+    let trimmed = order;
+    let serialized = JSON.stringify(trimmed);
+
+    while (serialized.length > ORDER_BUDGET && (trimmed.favorites.length || trimmed.spaces.length)) {
+        // Drop from whichever list is longer, so one huge list can't starve the other.
+        if (trimmed.spaces.length >= trimmed.favorites.length) {
+            trimmed = {...trimmed, spaces: trimmed.spaces.slice(0, -1)};
+        } else {
+            trimmed = {...trimmed, favorites: trimmed.favorites.slice(0, -1)};
+        }
+        serialized = JSON.stringify(trimmed);
+    }
+
+    return serialized;
+}
diff --git a/webapp/src/data/sidebar_widths.ts b/webapp/src/data/sidebar_widths.ts
new file mode 100644
index 0000000..f17c061
--- /dev/null
+++ b/webapp/src/data/sidebar_widths.ts
@@ -0,0 +1,33 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// Client-side store for resizable sidebar widths. How wide a user drags a panel
+// is a per-user UI preference with no server model, so it lives in localStorage
+// (mirroring data/collapsed_pages). Keyed per user and per panel name.
+
+const KEY_PREFIX = 'docs_sidebar_width_';
+
+const storageKey = (userId: string, name: string): string => `${KEY_PREFIX}${name}_${userId}`;
+
+/** The stored width for a panel, or undefined when unset/unavailable. */
+export function readSidebarWidth(userId: string, name: string): number | undefined {
+    try {
+        const raw = window.localStorage.getItem(storageKey(userId, name));
+        if (!raw) {
+            return undefined;
+        }
+        const width = Number.parseInt(raw, 10);
+        return Number.isFinite(width) ? width : undefined;
+    } catch {
+        // Storage unavailable (private mode / quota) — fall back to the default.
+        return undefined;
+    }
+}
+
+export function writeSidebarWidth(userId: string, name: string, width: number): void {
+    try {
+        window.localStorage.setItem(storageKey(userId, name), String(Math.round(width)));
+    } catch {
+        // Best-effort; a width is non-critical, so a write failure is ignored.
+    }
+}
diff --git a/webapp/src/hooks/favorites.ts b/webapp/src/hooks/favorites.ts
new file mode 100644
index 0000000..43d2400
--- /dev/null
+++ b/webapp/src/hooks/favorites.ts
@@ -0,0 +1,109 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {
+    EMPTY_SIDEBAR_ORDER,
+    FAVORITES_CATEGORY,
+    SIDEBAR_ORDER_CATEGORY,
+    parseSidebarOrder,
+    serializeSidebarOrder,
+} from 'data/favorites';
+import type {FavoriteRef, FavoriteType, SidebarOrder} from 'data/favorites';
+import {useAppDispatch, useAppSelector, useAppStore} from 'hooks/redux';
+import {useCallback, useMemo} from 'react';
+
+import {deletePreferences, savePreferences} from 'mattermost-redux/actions/preferences';
+import {get as getPreference} from 'mattermost-redux/selectors/entities/preferences';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+
+import {getDocsFavoriteIds, getDocsFavorites, getSpaceFavoriteState} from 'store/favorites';
+import type {SpaceFavoriteState} from 'store/favorites';
+
+/**
+ * Whether one item is favorited. Selects a boolean, so a component using this
+ * re-renders only when its own item is toggled — not when any favorite changes.
+ * Prefer this over `useFavorites` anywhere that renders per row.
+ */
+export function useIsFavorite(type: FavoriteType, id: string): boolean {
+    return useAppSelector((state) => getDocsFavoriteIds(state).has(id));
+}
+
+/**
+ * A space's tri-state favorite status (see getSpaceFavoriteState). Selects a
+ * string, so the caller re-renders only when that space's status changes.
+ */
+export function useSpaceFavoriteState(spaceId: string): SpaceFavoriteState {
+    return useAppSelector((state) => getSpaceFavoriteState(state, spaceId));
+}
+
+/**
+ * A stable toggle callback. Reads current membership from the store at call time
+ * rather than subscribing, so holding this never re-renders the caller.
+ */
+export function useToggleFavorite(): (type: FavoriteType, id: string) => void {
+    const dispatch = useAppDispatch();
+    const store = useAppStore();
+    const userId = useAppSelector(getCurrentUserId);
+
+    return useCallback((type: FavoriteType, id: string) => {
+        const preference = {user_id: userId, category: FAVORITES_CATEGORY, name: id, value: type};
+        if (getDocsFavoriteIds(store.getState()).has(id)) {
+            dispatch(deletePreferences(userId, [preference]));
+        } else {
+            dispatch(savePreferences(userId, [preference]));
+        }
+    }, [dispatch, store, userId]);
+}
+
+type FavoritesApi = {
+    favorites: FavoriteRef[];
+    isFavorite: (type: FavoriteType, id: string) => boolean;
+    toggleFavorite: (type: FavoriteType, id: string) => void;
+};
+
+/**
+ * The full favorites list. Only for consumers that need to enumerate favorites
+ * (the sidebar model); per-item callers should use `useIsFavorite` +
+ * `useToggleFavorite` to avoid subscribing to the whole list.
+ */
+export function useFavorites(): FavoritesApi {
+    const favorites = useAppSelector(getDocsFavorites);
+    const favoriteIds = useAppSelector(getDocsFavoriteIds);
+    const toggleFavorite = useToggleFavorite();
+
+    const isFavorite = useCallback((type: FavoriteType, id: string) => favoriteIds.has(id), [favoriteIds]);
+
+    return {favorites, isFavorite, toggleFavorite};
+}
+
+type SidebarOrderApi = {
+    order: SidebarOrder;
+    setOrder: (order: SidebarOrder) => void;
+};
+
+/**
+ * The user's manual sidebar ordering for a team, persisted as one preference per
+ * team. Mirrors the per-category ordered id lists core keeps on its sidebar
+ * categories.
+ */
+export function useSidebarOrder(teamId: string): SidebarOrderApi {
+    const dispatch = useAppDispatch();
+    const userId = useAppSelector(getCurrentUserId);
+    const stored = useAppSelector((state) => getPreference(state, SIDEBAR_ORDER_CATEGORY, teamId, ''));
+
+    const order = useMemo(() => (teamId ? parseSidebarOrder(stored) : EMPTY_SIDEBAR_ORDER), [teamId, stored]);
+
+    const setOrder = useCallback((next: SidebarOrder) => {
+        if (!teamId) {
+            return;
+        }
+        dispatch(savePreferences(userId, [{
+            user_id: userId,
+            category: SIDEBAR_ORDER_CATEGORY,
+            name: teamId,
+            value: serializeSidebarOrder(next),
+        }]));
+    }, [dispatch, userId, teamId]);
+
+    return {order, setOrder};
+}
diff --git a/webapp/src/hooks/members.ts b/webapp/src/hooks/members.ts
index 0d0d96f..eb58d54 100644
--- a/webapp/src/hooks/members.ts
+++ b/webapp/src/hooks/members.ts
@@ -19,6 +19,33 @@ export type MemberProfile = {
     avatarUrl: string;
 };
 
+// Resolves a single user id to a display profile, fetching it if the host store
+// doesn't have it yet (e.g. a page's author who isn't a loaded space member).
+export function useUserProfile(userId?: string): MemberProfile | undefined {
+    const dispatch = useAppDispatch();
+    const usersById = useAppSelector(getUsers);
+    const nameDisplay = useAppSelector(getTeammateNameDisplaySetting) || '';
+
+    useEffect(() => {
+        if (userId) {
+            dispatch(getMissingProfilesByIds([userId]));
+        }
+    }, [dispatch, userId]);
+
+    return useMemo(() => {
+        if (!userId) {
+            return undefined;
+        }
+        const user = usersById[userId];
+        return {
+            id: userId,
+            displayName: displayUsername(user, nameDisplay),
+            username: user?.username ?? '',
+            avatarUrl: Client4.getProfilePictureUrl(userId, user?.last_picture_update),
+        };
+    }, [userId, usersById, nameDisplay]);
+}
+
 // Resolves a space's member ids (from the Docs store) to display profiles,
 // fetching any not yet in the host store. Member ids are loaded by
 // fetchSpaceMembers (see useSpaceStats).
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index d428530..50d9b2f 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -4,7 +4,7 @@
 import {useTeamContext} from 'hooks/team';
 import {useCallback} from 'react';
 import {useHistory, useRouteMatch} from 'react-router-dom';
-import {DOCS_DRAFT_ROUTE, DOCS_ROUTE, docsHomePath, docsPath, draftPath, pagePath, spacePath} from 'routing/paths';
+import {DOCS_DRAFT_ROUTE, DOCS_ROUTE, DOCS_SPACE_OVERVIEW_ROUTE, docsHomePath, docsPath, draftPath, overviewPath, pagePath, spacePath} from 'routing/paths';
 
 type DocsRouteParams = {
     team?: string;
@@ -20,20 +20,22 @@ type DocsRouteParams = {
 export function useDocsNavigation() {
     const history = useHistory();
 
-    // Draft route first: it's the more specific pattern. DOCS_ROUTE treats the
-    // segment after :spaceId as :pageId, so a draft URL (…/:spaceId/drafts/:pageId)
-    // would otherwise parse pageId='drafts' and drop the real page id.
-    const match = useRouteMatch<DocsRouteParams>([DOCS_DRAFT_ROUTE, DOCS_ROUTE]);
+    // Specific patterns first: DOCS_ROUTE treats the segment after :spaceId as
+    // :pageId, so a draft URL (…/:spaceId/drafts/:pageId) would parse
+    // pageId='drafts', and an overview URL would parse pageId='overview'.
+    const match = useRouteMatch<DocsRouteParams>([DOCS_DRAFT_ROUTE, DOCS_SPACE_OVERVIEW_ROUTE, DOCS_ROUTE]);
     const {name: currentTeamName} = useTeamContext();
 
     const teamName = match?.params.team || currentTeamName;
     const spaceId = match?.params.spaceId;
     const pageId = match?.params.pageId;
     const isDraft = match?.path === DOCS_DRAFT_ROUTE;
+    const isOverview = match?.path === DOCS_SPACE_OVERVIEW_ROUTE;
 
     const goToSpace = useCallback((id: string) => history.push(spacePath(teamName, id)), [history, teamName]);
     const goToPage = useCallback((space: string, page: string) => history.push(pagePath(teamName, space, page)), [history, teamName]);
     const goToDraft = useCallback((space: string, page: string) => history.push(draftPath(teamName, space, page)), [history, teamName]);
+    const goToOverview = useCallback((space: string) => history.push(overviewPath(teamName, space)), [history, teamName]);
     const goHome = useCallback(() => history.push(docsHomePath(teamName)), [history, teamName]);
     const navigate = useCallback((space: string, page?: string) => history.push(docsPath(teamName, space, page)), [history, teamName]);
 
@@ -46,9 +48,11 @@ export function useDocsNavigation() {
         spaceId,
         pageId,
         isDraft,
+        isOverview,
         goToSpace,
         goToPage,
         goToDraft,
+        goToOverview,
         goHome,
         navigate,
         navigateInTeam,
@@ -59,6 +63,7 @@ export function useDocsNavigation() {
             home: () => docsHomePath(teamName),
             space: (id: string) => spacePath(teamName, id),
             page: (space: string, page: string) => pagePath(teamName, space, page),
+            overview: (space: string) => overviewPath(teamName, space),
             draft: (space: string, page: string) => draftPath(teamName, space, page),
             to: (space?: string, page?: string) => docsPath(teamName, space, page),
         },
diff --git a/webapp/src/hooks/page_tree.ts b/webapp/src/hooks/page_tree.ts
index b5690b0..3cfee15 100644
--- a/webapp/src/hooks/page_tree.ts
+++ b/webapp/src/hooks/page_tree.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {getCollapsed, toggleCollapsed} from 'data/collapsed_pages';
+import {getCollapsed, setCollapsedFor, toggleCollapsed} from 'data/collapsed_pages';
 import {useAppSelector} from 'hooks/redux';
 import {useCallback, useState} from 'react';
 
@@ -10,6 +10,7 @@ import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 type CollapsedPages = {
     collapsed: Set<string>;
     toggle: (pageId: string) => void;
+    setCollapsedFor: (ids: string[], collapsed: boolean) => void;
 };
 
 // Owns the current user's collapsed-node set for the page tree, backed by
@@ -22,5 +23,9 @@ export function useCollapsedPages(): CollapsedPages {
         setCollapsed(toggleCollapsed(userId, pageId));
     }, [userId]);
 
-    return {collapsed, toggle};
+    const setMany = useCallback((ids: string[], next: boolean) => {
+        setCollapsed(setCollapsedFor(userId, ids, next));
+    }, [userId]);
+
+    return {collapsed, toggle, setCollapsedFor: setMany};
 }
diff --git a/webapp/src/hooks/pages.ts b/webapp/src/hooks/pages.ts
new file mode 100644
index 0000000..f1965f3
--- /dev/null
+++ b/webapp/src/hooks/pages.ts
@@ -0,0 +1,59 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+
+import {createPage} from 'store/actions';
+import {getPage} from 'store/selectors';
+
+import {SPACE_PROP_DEFAULT_PAGE_ID} from 'types/docs';
+import type {Space} from 'types/docs';
+
+import {useDocsNavigation} from './navigation';
+import {useAppDispatch, useAppSelector} from './redux';
+
+/**
+ * Returns a handler that creates a top-level page in the space and navigates to
+ * it. Shared by the page header's add button and the page tree's "Add page".
+ */
+export function useCreateRootPage(spaceId: string) {
+    const dispatch = useAppDispatch();
+    const {goToPage} = useDocsNavigation();
+    const {formatMessage} = useIntl();
+    const untitled = formatMessage({id: 'docs.pageTree.untitled', defaultMessage: 'Untitled'});
+
+    return useCallback(async () => {
+        try {
+            const page = await dispatch(createPage(spaceId, {title: untitled}));
+            goToPage(spaceId, page.id);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to create page', error);
+        }
+    }, [dispatch, spaceId, untitled, goToPage]);
+}
+
+/**
+ * The path a space-home URL should redirect to when the space has a default page
+ * configured, or undefined when it should stay on the space front door. Render
+ * the result through react-router's `<Redirect>`, which replaces the history
+ * entry so Back doesn't bounce straight into the redirect again.
+ *
+ * Resolves the page from the store rather than trusting the prop: pages load
+ * asynchronously, and the prop can still name a page that was since deleted or
+ * moved to another space.
+ */
+export function useDefaultPagePath(space: Space): string | undefined {
+    const {pageId, isOverview, paths} = useDocsNavigation();
+
+    const defaultPageId = space.props?.[SPACE_PROP_DEFAULT_PAGE_ID] ?? '';
+    const defaultPage = useAppSelector((state) => (defaultPageId ? getPage(state, defaultPageId) : undefined));
+
+    // An explicit /overview request outranks the default page; otherwise the
+    // space's front door would be unreachable once a default is set.
+    if (pageId || isOverview || !defaultPage || defaultPage.space_id !== space.id) {
+        return undefined;
+    }
+    return paths.page(space.id, defaultPage.id);
+}
diff --git a/webapp/src/hooks/sidebar_width.ts b/webapp/src/hooks/sidebar_width.ts
new file mode 100644
index 0000000..a775a85
--- /dev/null
+++ b/webapp/src/hooks/sidebar_width.ts
@@ -0,0 +1,77 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {readSidebarWidth, writeSidebarWidth} from 'data/sidebar_widths';
+import {useAppSelector} from 'hooks/redux';
+import {useCallback, useSyncExternalStore} from 'react';
+
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+
+// Widths live in a module-level store rather than component state so that every
+// reader of a given panel sees the same live value — the pages sidebar owns the
+// drag, while other chrome (e.g. the page header) can align to its edge without
+// the width being threaded through props. Seeded from localStorage on first read.
+const widths = new Map<string, number>();
+const listeners = new Set<() => void>();
+
+const storeKey = (userId: string, name: string): string => `${userId}:${name}`;
+
+const subscribe = (listener: () => void): (() => void) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+
+const setStoredWidth = (key: string, width: number): void => {
+    if (widths.get(key) !== width) {
+        widths.set(key, width);
+        listeners.forEach((listener) => listener());
+    }
+};
+
+// Idempotent: memoizes the initial localStorage read so getSnapshot stays stable.
+const currentWidth = (userId: string, name: string, defaultWidth: number): number => {
+    const key = storeKey(userId, name);
+    const known = widths.get(key);
+    if (known !== undefined) {
+        return known;
+    }
+    const initial = readSidebarWidth(userId, name) ?? defaultWidth;
+    widths.set(key, initial);
+    return initial;
+};
+
+type SidebarWidth = {
+    width: number;
+
+    /** Transient update while dragging — shared immediately, not persisted. */
+    setWidth: (width: number) => void;
+
+    /** Persists the final width for this user. */
+    commitWidth: (width: number) => void;
+};
+
+/**
+ * A resizable panel's width for the current user, restored from and saved to
+ * localStorage (see data/sidebar_widths). Drag with `setWidth` and persist once
+ * on release with `commitWidth`, so a drag isn't a write per frame.
+ *
+ * Calling this with the same `name` anywhere returns the same live value, so a
+ * read-only consumer can just call it instead of receiving the width as a prop.
+ */
+export function useSidebarWidth(name: string, defaultWidth: number): SidebarWidth {
+    const userId = useAppSelector(getCurrentUserId);
+    const key = storeKey(userId, name);
+
+    const width = useSyncExternalStore(subscribe, () => currentWidth(userId, name, defaultWidth));
+
+    const setWidth = useCallback((next: number) => setStoredWidth(key, next), [key]);
+
+    const commitWidth = useCallback((next: number) => {
+        setStoredWidth(key, next);
+        writeSidebarWidth(userId, name, next);
+    }, [key, userId, name]);
+
+    return {width, setWidth, commitWidth};
+}
diff --git a/webapp/src/hooks/team.ts b/webapp/src/hooks/team.ts
index 53a7b72..d298e58 100644
--- a/webapp/src/hooks/team.ts
+++ b/webapp/src/hooks/team.ts
@@ -32,3 +32,10 @@ export function useTeamNamesById(): Map<string, string> {
     const teams = useSelector(getMyTeams);
     return useMemo(() => new Map(teams.map((team) => [team.id, team.name])), [teams]);
 }
+
+// Maps team id → display name, for labelling a result that lives in another team.
+// Distinct from useTeamNamesById, which yields the URL name used for routing.
+export function useTeamDisplayNamesById(): Map<string, string> {
+    const teams = useSelector(getMyTeams);
+    return useMemo(() => new Map(teams.map((team) => [team.id, team.display_name])), [teams]);
+}
diff --git a/webapp/src/hooks/text_overflow.ts b/webapp/src/hooks/text_overflow.ts
new file mode 100644
index 0000000..e46ae23
--- /dev/null
+++ b/webapp/src/hooks/text_overflow.ts
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useCallback, useEffect, useState} from 'react';
+
+/**
+ * Detects whether a text element is overflowing its container (e.g. truncated
+ * with ellipsis). Returns `[isOverflowing, nodeRef]` — pass `nodeRef` as the
+ * element's `ref` prop. Uses a callback ref so the observer re-binds when the
+ * element identity changes (React refs don't trigger effect re-runs).
+ *
+ * Uses ResizeObserver to re-check on size changes.
+ *
+ * Ported from core's channel_bookmarks/hooks/use_text_overflow.
+ */
+export function useTextOverflow(): [boolean, (node: HTMLElement | null) => void] {
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const [node, setNode] = useState<HTMLElement | null>(null);
+    const nodeRef = useCallback((el: HTMLElement | null) => {
+        setNode(el);
+    }, []);
+
+    useEffect(() => {
+        if (!node) {
+            return undefined;
+        }
+
+        const checkOverflow = () => {
+            setIsOverflowing(node.scrollWidth > node.clientWidth);
+        };
+
+        checkOverflow();
+
+        const resizeObserver = new ResizeObserver(checkOverflow);
+        resizeObserver.observe(node);
+
+        return () => {
+            resizeObserver.unobserve(node);
+            resizeObserver.disconnect();
+        };
+    }, [node]);
+
+    return [isOverflowing, nodeRef];
+}
diff --git a/webapp/src/routing/paths.ts b/webapp/src/routing/paths.ts
index 1726059..3c5f28d 100644
--- a/webapp/src/routing/paths.ts
+++ b/webapp/src/routing/paths.ts
@@ -33,6 +33,19 @@ const SPACE_OR_PAGE_ID = '[a-z0-9][a-z0-9\\-_]*';
 export const DOCS_ROUTE = `/:team/${DOCS_KEYWORD}/:spaceId(${SPACE_OR_PAGE_ID})?/:pageId(${SPACE_OR_PAGE_ID})?`;
 export const DOCS_DRAFT_ROUTE = `/:team/${DOCS_KEYWORD}/:spaceId(${SPACE_OR_PAGE_ID})/drafts/:pageId(${SPACE_OR_PAGE_ID})`;
 
+// A routed space, with or without a page. Distinct from DOCS_ROUTE (whose params
+// are both optional, for parsing the current location) so it can be matched on
+// its own in a <Switch> — the product home is then the fallthrough.
+export const DOCS_SPACE_ROUTE = `/:team/${DOCS_KEYWORD}/:spaceId(${SPACE_OR_PAGE_ID})/:pageId(${SPACE_OR_PAGE_ID})?`;
+
+// The space's front door, addressed explicitly. A bare space URL redirects to the
+// space's default page when one is set, so "show me the overview" needs a URL of
+// its own — otherwise the redirect would always win. Like `drafts`, this segment
+// must be matched before the generic page route, which would otherwise read it as
+// a page id.
+export const DOCS_OVERVIEW_SEGMENT = 'overview';
+export const DOCS_SPACE_OVERVIEW_ROUTE = `/:team/${DOCS_KEYWORD}/:spaceId(${SPACE_OR_PAGE_ID})/${DOCS_OVERVIEW_SEGMENT}`;
+
 const segment = (value: string): string => encodeURIComponent(value);
 
 const teamRoot = (teamName: string): string => `/${segment(teamName)}/${DOCS_KEYWORD}`;
@@ -43,6 +56,8 @@ export const spacePath = (teamName: string, spaceId: string): string => `${teamR
 
 export const pagePath = (teamName: string, spaceId: string, pageId: string): string => `${spacePath(teamName, spaceId)}/${segment(pageId)}`;
 
+export const overviewPath = (teamName: string, spaceId: string): string => `${spacePath(teamName, spaceId)}/${DOCS_OVERVIEW_SEGMENT}`;
+
 export const draftPath = (teamName: string, spaceId: string, pageId: string): string => `${spacePath(teamName, spaceId)}/drafts/${segment(pageId)}`;
 
 export const docsPath = (teamName: string, spaceId?: string, pageId?: string): string => {
diff --git a/webapp/src/store/action_types.ts b/webapp/src/store/action_types.ts
index cbe8812..c0f49f0 100644
--- a/webapp/src/store/action_types.ts
+++ b/webapp/src/store/action_types.ts
@@ -13,4 +13,5 @@ export const SpaceTypes = {
 export const PageTypes = {
     RECEIVED_PAGES: manifest.id + '_received_pages',
     MOVED_PAGE: manifest.id + '_moved_page',
+    DELETED_PAGE: manifest.id + '_deleted_page',
 } as const;
diff --git a/webapp/src/store/actions.ts b/webapp/src/store/actions.ts
index 37d48cf..2aa61bf 100644
--- a/webapp/src/store/actions.ts
+++ b/webapp/src/store/actions.ts
@@ -3,14 +3,17 @@
 
 import {docsDataSource} from 'data';
 
+import {ClientError} from '@mattermost/client';
+
 import {getCurrentTeamId, getMyTeams} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
-import type {CreatePageInput, CreateSpaceInput, Page, Space, UpdateSpacePatch} from 'types/docs';
+import type {CreatePageInput, CreateSpaceInput, Page, Space, UpdatePagePatch, UpdateSpacePatch} from 'types/docs';
 import type {DocsThunkAction} from 'types/store';
 
 import {PageTypes, SpaceTypes} from './action_types';
-import {getPage, getSpace} from './selectors';
+import {collectSubtreeIds} from './entities';
+import {getPage, getPagesById, getSpace} from './selectors';
 
 // Spaces the caller belongs to in the current team (the server scopes the list
 // by backing-channel membership). A failed load leaves the store empty rather
@@ -23,7 +26,11 @@ export function fetchSpaces(): DocsThunkAction<Promise<void>> {
         }
         try {
             const spaces = await docsDataSource.listSpaces(teamId);
-            dispatch({type: SpaceTypes.RECEIVED_SPACES, spaces});
+
+            // `teamId` records that this team's list is now known, so consumers
+            // can tell "no spaces" from "not loaded yet" (an empty result would
+            // otherwise leave no trace in the index).
+            dispatch({type: SpaceTypes.RECEIVED_SPACES, spaces, teamId});
         } catch (error) {
             // eslint-disable-next-line no-console
             console.error('Docs: failed to load spaces', error);
@@ -95,6 +102,32 @@ export function createPage(spaceId: string, input: CreatePageInput): DocsThunkAc
     };
 }
 
+// Patches a page's editable fields and reconciles the store with the
+// server-returned page. Reads the current edit_at as the optimistic-lock
+// baseline (the server rejects a stale write). Rejects on failure so the caller
+// can surface it and stay open.
+export function updatePage(spaceId: string, pageId: string, patch: UpdatePagePatch): DocsThunkAction<Promise<Page>> {
+    return async (dispatch, getState) => {
+        const page = getPage(getState(), pageId);
+        if (!page) {
+            throw new Error(`Docs: page ${pageId} is not loaded`);
+        }
+        const updated = await docsDataSource.updatePage(spaceId, pageId, patch, page.edit_at);
+        dispatch({type: PageTypes.RECEIVED_PAGES, pages: [updated]});
+        return updated;
+    };
+}
+
+// Deletes (soft-deletes) a page and prunes it — and its descendants — from the
+// store. Rejects on failure so the caller can surface it.
+export function deletePage(spaceId: string, pageId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch, getState) => {
+        const pageIds = [...collectSubtreeIds(getPagesById(getState()), pageId)];
+        await docsDataSource.deletePage(spaceId, pageId);
+        dispatch({type: PageTypes.DELETED_PAGE, pageId, spaceId, pageIds});
+    };
+}
+
 // Loads a space's members (user ids) into the store, backing the member count.
 export function fetchSpaceMembers(spaceId: string): DocsThunkAction<Promise<void>> {
     return async (dispatch) => {
@@ -141,6 +174,14 @@ export function deleteSpace(spaceId: string): DocsThunkAction<Promise<void>> {
     };
 }
 
+// The server rejects removing a space's last authorized member with
+// `app.space.remove_member.last_member.app_error` (409). The REST layer keeps
+// only {message, status_code} from the AppError, so the status is all a caller
+// has to recognize it by.
+export function isLastSpaceMemberError(error: unknown): boolean {
+    return error instanceof ClientError && error.status_code === 409;
+}
+
 // Leaving a space is removing yourself from its membership. The server rejects
 // removing the last authorized member (409); the caller surfaces that.
 export function leaveSpace(spaceId: string): DocsThunkAction<Promise<void>> {
diff --git a/webapp/src/store/entities.test.ts b/webapp/src/store/entities.test.ts
new file mode 100644
index 0000000..92a42a8
--- /dev/null
+++ b/webapp/src/store/entities.test.ts
@@ -0,0 +1,182 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {PageTypes, SpaceTypes} from './action_types';
+import reducer, {collectSubtreeIds, reindexAfterMove} from './entities';
+import {makePage, makeSpace} from './test_fixtures';
+
+const withParent = (id: string, parentId: string, title: string, sortOrder: number) => ({
+    ...makePage(id, 'space-a', title, sortOrder),
+    parent_id: parentId,
+});
+
+describe('spaces', () => {
+    const initialState = reducer(undefined, {type: '@@INIT'});
+
+    it('RECEIVED_SPACES merges byId and indexes ids by team', () => {
+        const spaceA = makeSpace('a', 'Space A', 't1');
+        const spaceB = makeSpace('b', 'Space B', 't2');
+
+        const afterFirst = reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceA]});
+        expect(afterFirst.spaces).toEqual({a: spaceA});
+        expect(afterFirst.spacesInTeam.t1).toEqual(new Set(['a']));
+
+        const afterSecond = reducer(afterFirst, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceB]});
+        expect(afterSecond.spaces).toEqual({a: spaceA, b: spaceB});
+        expect(afterSecond.spacesInTeam.t1).toEqual(new Set(['a']));
+        expect(afterSecond.spacesInTeam.t2).toEqual(new Set(['b']));
+    });
+
+    it('RECEIVED_SPACES with a teamId marks the team loaded even when it has none', () => {
+        const afterEmpty = reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: [], teamId: 't1'});
+
+        // The entry's presence is what distinguishes "no spaces" from "not loaded".
+        expect('t1' in afterEmpty.spacesInTeam).toBe(true);
+        expect(afterEmpty.spacesInTeam.t1).toEqual(new Set());
+
+        // An empty list without a teamId carries no such claim.
+        expect('t2' in reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: []}).spacesInTeam).toBe(false);
+    });
+
+    it('CREATED_SPACE adds to byId and its team set', () => {
+        const spaceA = makeSpace('a', 'Space A', 't1');
+        const spaceB = makeSpace('b', 'Space B', 't1');
+
+        const afterReceive = reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceA]});
+        const afterCreate = reducer(afterReceive, {type: SpaceTypes.CREATED_SPACE, space: spaceB});
+
+        expect(afterCreate.spaces).toEqual({a: spaceA, b: spaceB});
+        expect(afterCreate.spacesInTeam.t1).toEqual(new Set(['a', 'b']));
+    });
+
+    it('DELETED_SPACE prunes byId and the team set', () => {
+        const spaceA = makeSpace('a', 'Space A', 't1');
+        const spaceB = makeSpace('b', 'Space B', 't1');
+
+        const afterReceive = reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceA, spaceB]});
+        const afterDelete = reducer(afterReceive, {type: SpaceTypes.DELETED_SPACE, spaceId: 'a'});
+
+        expect(afterDelete.spaces).toEqual({b: spaceB});
+        expect(afterDelete.spacesInTeam.t1).toEqual(new Set(['b']));
+    });
+});
+
+describe('pages', () => {
+    const initialState = reducer(undefined, {type: '@@INIT'});
+
+    it('RECEIVED_PAGES merges byId and indexes ids by space', () => {
+        const page1 = makePage('p1', 'space-a', 'Page 1');
+        const page2 = makePage('p2', 'space-a', 'Page 2');
+        const page3 = makePage('p3', 'space-b', 'Page 3');
+
+        const afterFirst = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [page1, page2]});
+        expect(afterFirst.pages).toEqual({p1: page1, p2: page2});
+        expect(afterFirst.pagesInSpace['space-a']).toEqual(new Set(['p1', 'p2']));
+
+        const afterSecond = reducer(afterFirst, {type: PageTypes.RECEIVED_PAGES, pages: [page3]});
+        expect(afterSecond.pages).toEqual({p1: page1, p2: page2, p3: page3});
+        expect(afterSecond.pagesInSpace['space-a']).toEqual(new Set(['p1', 'p2']));
+        expect(afterSecond.pagesInSpace['space-b']).toEqual(new Set(['p3']));
+    });
+
+    it('DELETED_SPACE removes that space\'s pages from byId and its space index', () => {
+        const page1 = makePage('p1', 'space-a', 'Page 1');
+        const page2 = makePage('p2', 'space-b', 'Page 2');
+
+        const afterReceive = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [page1, page2]});
+        const afterDelete = reducer(afterReceive, {type: SpaceTypes.DELETED_SPACE, spaceId: 'space-a'});
+
+        expect(afterDelete.pages).toEqual({p2: page2});
+        expect(afterDelete.pagesInSpace['space-a']).toBeUndefined();
+        expect(afterDelete.pagesInSpace['space-b']).toEqual(new Set(['p2']));
+    });
+
+    it('MOVED_PAGE reindexes the moved page within the store', () => {
+        const a = withParent('a', '', 'A', 0);
+        const b = withParent('b', '', 'B', 1);
+        const c = withParent('c', '', 'C', 2);
+
+        const afterReceive = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [a, b, c]});
+        const afterMove = reducer(afterReceive, {
+            type: PageTypes.MOVED_PAGE,
+            pageId: 'c',
+            spaceId: 'space-a',
+            parentId: '',
+            siblingIndex: 0,
+        });
+
+        expect(afterMove.pages.c.sort_order).toBe(0);
+        expect(afterMove.pages.a.sort_order).toBe(1);
+        expect(afterMove.pages.b.sort_order).toBe(2);
+    });
+
+    it('DELETED_PAGE prunes the page and its subtree from byId and the space index', () => {
+        const parent = withParent('parent', '', 'Parent', 0);
+        const child = withParent('child', 'parent', 'Child', 0);
+        const grandchild = withParent('grandchild', 'child', 'Grandchild', 0);
+        const sibling = withParent('sibling', '', 'Sibling', 1);
+
+        const afterReceive = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [parent, child, grandchild, sibling]});
+        const afterDelete = reducer(afterReceive, {
+            type: PageTypes.DELETED_PAGE,
+            pageId: 'parent',
+            spaceId: 'space-a',
+            pageIds: [...collectSubtreeIds(afterReceive.pages, 'parent')],
+        });
+
+        expect(afterDelete.pages).toEqual({sibling});
+        expect(afterDelete.pagesInSpace['space-a']).toEqual(new Set(['sibling']));
+    });
+});
+
+describe('collectSubtreeIds', () => {
+    it('collects the root and every descendant, excluding unrelated pages', () => {
+        const byId = {
+            root: withParent('root', '', 'Root', 0),
+            a: withParent('a', 'root', 'A', 0),
+            b: withParent('b', 'a', 'B', 0),
+            other: withParent('other', '', 'Other', 1),
+        };
+
+        expect(collectSubtreeIds(byId, 'root')).toEqual(new Set(['root', 'a', 'b']));
+        expect(collectSubtreeIds(byId, 'a')).toEqual(new Set(['a', 'b']));
+    });
+});
+
+describe('reindexAfterMove', () => {
+    it('reorders siblings within the same parent (0-based)', () => {
+        const byId = {
+            a: withParent('a', '', 'A', 0),
+            b: withParent('b', '', 'B', 1),
+            c: withParent('c', '', 'C', 2),
+        };
+
+        // Move A to the end.
+        const next = reindexAfterMove(byId, 'a', 'space-a', '', 2);
+
+        expect(next.b.sort_order).toBe(0);
+        expect(next.c.sort_order).toBe(1);
+        expect(next.a.sort_order).toBe(2);
+        expect(next.a.parent_id).toBe('');
+    });
+
+    it('reparents a page and reindexes both the old and new sibling groups', () => {
+        const byId = {
+            p: withParent('p', '', 'Parent', 0),
+            a: withParent('a', '', 'A', 1),
+            b: withParent('b', '', 'B', 2),
+            x: withParent('x', 'p', 'X', 0),
+        };
+
+        // Move B under P as its first child.
+        const next = reindexAfterMove(byId, 'b', 'space-a', 'p', 0);
+
+        expect(next.b.parent_id).toBe('p');
+        expect(next.b.sort_order).toBe(0);
+        expect(next.x.sort_order).toBe(1);
+
+        // Old root group renumbers to fill the gap.
+        expect(next.p.sort_order).toBe(0);
+        expect(next.a.sort_order).toBe(1);
+    });
+});
diff --git a/webapp/src/store/entities.ts b/webapp/src/store/entities.ts
new file mode 100644
index 0000000..0f92889
--- /dev/null
+++ b/webapp/src/store/entities.ts
@@ -0,0 +1,279 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {combineReducers} from 'redux';
+import type {UnknownAction} from 'redux';
+
+import type {Page, Space} from 'types/docs';
+
+import {PageTypes, SpaceTypes} from './action_types';
+
+// `teamId` is set when the action is a full list for that team, which seeds the
+// team's index entry even when it has no spaces (see the spacesInTeam reducer).
+type ReceivedSpacesAction = {spaces: Space[]; teamId?: string};
+type CreatedSpaceAction = {space: Space};
+type DeletedSpaceAction = {spaceId: string};
+type ReceivedPagesAction = {pages: Page[]};
+type MovedPageAction = {pageId: string; spaceId: string; parentId: string; siblingIndex: number};
+
+// `pageIds` is the deleted page plus its descendants: the byId map and the
+// per-space index are separate slices, so the ids are resolved once by the thunk
+// (via collectSubtreeIds) rather than twice from a map only one slice holds.
+type DeletedPageAction = {pageId: string; spaceId: string; pageIds: string[]};
+type ReceivedSpaceMembersAction = {spaceId: string; userIds: string[]};
+
+const bySortOrder = (a: Page, b: Page): number =>
+    a.sort_order - b.sort_order || a.title.localeCompare(b.title);
+
+// Moves a page under `newParentId` at `siblingIndex` and renumbers the affected
+// sibling groups' sort_order 0-based, mirroring the server's reindex. Returns a
+// new byId map (untouched pages are shared by reference). Only pages in
+// `spaceId` are considered; a pure reorder (same parent) skips the old group.
+export function reindexAfterMove(
+    byId: Record<string, Page>,
+    pageId: string,
+    spaceId: string,
+    newParentId: string,
+    siblingIndex: number,
+): Record<string, Page> {
+    const moved = byId[pageId];
+    if (!moved) {
+        return byId;
+    }
+    const oldParentId = moved.parent_id;
+    const next = {...byId};
+
+    const groupOf = (parentId: string): Page[] => Object.values(byId).
+        filter((page) => page.space_id === spaceId && page.parent_id === parentId && page.id !== pageId).
+        sort(bySortOrder);
+
+    const newGroup = groupOf(newParentId);
+    const index = Math.max(0, Math.min(siblingIndex, newGroup.length));
+    newGroup.splice(index, 0, moved);
+    newGroup.forEach((page, i) => {
+        next[page.id] = {...page, parent_id: newParentId, sort_order: i};
+    });
+
+    if (oldParentId !== newParentId) {
+        groupOf(oldParentId).forEach((page, i) => {
+            next[page.id] = {...page, sort_order: i};
+        });
+    }
+
+    return next;
+}
+
+// The ids of `rootId` and every page beneath it (BFS over parent_id). Deleting a
+// page deletes its subpages on the server, so the store prunes the same set.
+export function collectSubtreeIds(byId: Record<string, Page>, rootId: string): Set<string> {
+    const childIds = new Map<string, string[]>();
+    for (const page of Object.values(byId)) {
+        childIds.set(page.parent_id, [...childIds.get(page.parent_id) ?? [], page.id]);
+    }
+
+    const ids = new Set([rootId]);
+    const queue = [rootId];
+    while (queue.length > 0) {
+        for (const id of childIds.get(queue.shift()!) ?? []) {
+            if (!ids.has(id)) {
+                ids.add(id);
+                queue.push(id);
+            }
+        }
+    }
+
+    return ids;
+}
+
+// SpaceTypes'/PageTypes' values aren't string-literal types (manifest.id is
+// loaded via JSON.parse), so `action.type` can't discriminate a union by
+// itself — each case casts to its own shape, mirroring the core channels
+// reducer.
+
+// Normalized entity maps (byId) and per-parent Set indices, modeled on core's
+// `channels` + `channelsInTeam`. Sets give O(1) membership/add/remove so
+// high-throughput WebSocket events touch only the affected entity and index.
+
+function spaces(state: Record<string, Space> = {}, action: UnknownAction): Record<string, Space> {
+    switch (action.type) {
+    case SpaceTypes.RECEIVED_SPACES: {
+        const {spaces: received} = action as unknown as ReceivedSpacesAction;
+        if (received.length === 0) {
+            return state;
+        }
+        const next = {...state};
+        for (const space of received) {
+            next[space.id] = space;
+        }
+        return next;
+    }
+    case SpaceTypes.CREATED_SPACE: {
+        const {space} = action as unknown as CreatedSpaceAction;
+        return {...state, [space.id]: space};
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        if (!(spaceId in state)) {
+            return state;
+        }
+        const next = {...state};
+        delete next[spaceId];
+        return next;
+    }
+    default:
+        return state;
+    }
+}
+
+function addSpaceToTeam(state: Record<string, Set<string>>, space: Space): Record<string, Set<string>> {
+    const next = new Set(state[space.team_id]);
+    next.add(space.id);
+    return {...state, [space.team_id]: next};
+}
+
+function spacesInTeam(state: Record<string, Set<string>> = {}, action: UnknownAction): Record<string, Set<string>> {
+    switch (action.type) {
+    case SpaceTypes.RECEIVED_SPACES: {
+        const {spaces: received, teamId} = action as unknown as ReceivedSpacesAction;
+        if (received.length === 0 && (teamId === undefined || teamId in state)) {
+            return state;
+        }
+        const next = {...state};
+
+        // A listed team always gets an entry, so its presence means "this team's
+        // spaces are loaded" even when the team has none.
+        if (teamId !== undefined && !(teamId in next)) {
+            next[teamId] = new Set();
+        }
+        for (const space of received) {
+            const set = new Set(next[space.team_id]);
+            set.add(space.id);
+            next[space.team_id] = set;
+        }
+        return next;
+    }
+    case SpaceTypes.CREATED_SPACE: {
+        const {space} = action as unknown as CreatedSpaceAction;
+        return addSpaceToTeam(state, space);
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        const teamId = Object.keys(state).find((id) => state[id].has(spaceId));
+        if (teamId === undefined) {
+            return state;
+        }
+        const set = new Set(state[teamId]);
+        set.delete(spaceId);
+        return {...state, [teamId]: set};
+    }
+    default:
+        return state;
+    }
+}
+
+function pages(state: Record<string, Page> = {}, action: UnknownAction): Record<string, Page> {
+    switch (action.type) {
+    case PageTypes.RECEIVED_PAGES: {
+        const {pages: received} = action as unknown as ReceivedPagesAction;
+        if (received.length === 0) {
+            return state;
+        }
+        const next = {...state};
+        for (const page of received) {
+            next[page.id] = page;
+        }
+        return next;
+    }
+    case PageTypes.MOVED_PAGE: {
+        const {pageId, spaceId, parentId, siblingIndex} = action as unknown as MovedPageAction;
+        if (!(pageId in state)) {
+            return state;
+        }
+        return reindexAfterMove(state, pageId, spaceId, parentId, siblingIndex);
+    }
+    case PageTypes.DELETED_PAGE: {
+        const {pageIds} = action as unknown as DeletedPageAction;
+        const removed = pageIds.filter((id) => id in state);
+        if (removed.length === 0) {
+            return state;
+        }
+        const next = {...state};
+        removed.forEach((id) => delete next[id]);
+        return next;
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        const remaining = Object.entries(state).filter(([, page]) => page.space_id !== spaceId);
+        return remaining.length === Object.keys(state).length ? state : Object.fromEntries(remaining);
+    }
+    default:
+        return state;
+    }
+}
+
+function pagesInSpace(state: Record<string, Set<string>> = {}, action: UnknownAction): Record<string, Set<string>> {
+    switch (action.type) {
+    case PageTypes.RECEIVED_PAGES: {
+        const {pages: received} = action as unknown as ReceivedPagesAction;
+        if (received.length === 0) {
+            return state;
+        }
+        const next = {...state};
+        for (const page of received) {
+            const set = new Set(next[page.space_id]);
+            set.add(page.id);
+            next[page.space_id] = set;
+        }
+        return next;
+    }
+    case PageTypes.DELETED_PAGE: {
+        const {spaceId, pageIds} = action as unknown as DeletedPageAction;
+        const set = state[spaceId];
+        if (!set || !pageIds.some((id) => set.has(id))) {
+            return state;
+        }
+        const nextSet = new Set(set);
+        pageIds.forEach((id) => nextSet.delete(id));
+        return {...state, [spaceId]: nextSet};
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        if (!(spaceId in state)) {
+            return state;
+        }
+        const next = {...state};
+        delete next[spaceId];
+        return next;
+    }
+    default:
+        return state;
+    }
+}
+
+// Space member user ids, keyed by space id. Roles/capabilities are hidden by
+// the server, so this is just membership (count today, avatars later).
+function spaceMembers(state: Record<string, string[]> = {}, action: UnknownAction): Record<string, string[]> {
+    switch (action.type) {
+    case SpaceTypes.RECEIVED_SPACE_MEMBERS: {
+        const {spaceId, userIds} = action as unknown as ReceivedSpaceMembersAction;
+        return {...state, [spaceId]: userIds};
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        if (!(spaceId in state)) {
+            return state;
+        }
+        const next = {...state};
+        delete next[spaceId];
+        return next;
+    }
+    default:
+        return state;
+    }
+}
+
+// Normalized server entities, kept separate from view/UI state so future
+// top-level reducers (e.g. `views`) can sit beside this one.
+const entities = combineReducers({spaces, spacesInTeam, pages, pagesInSpace, spaceMembers});
+
+export default entities;
diff --git a/webapp/src/store/favorites.ts b/webapp/src/store/favorites.ts
new file mode 100644
index 0000000..46c9ea1
--- /dev/null
+++ b/webapp/src/store/favorites.ts
@@ -0,0 +1,109 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {FAVORITES_CATEGORY, parseFavorite} from 'data/favorites';
+import type {FavoriteRef, FavoriteType} from 'data/favorites';
+import {createSelector} from 'reselect';
+
+import type {GlobalState} from '@mattermost/types/store';
+
+import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
+
+import {getPagesById} from 'store/selectors';
+
+// Favorites live in the host's preferences state, so these read from there rather
+// than the plugin subtree. Every derivation below is a module-level memoized
+// selector: the work is done once per preferences change and shared by every
+// consumer, instead of once per component (the sidebar renders a menu per row,
+// so per-component derivation is O(rows x favorites) on each change).
+//
+// makeGetCategory scans all of the user's preferences, which is why it must be
+// instantiated once here and not per hook call.
+const getFavoritePreferences = makeGetCategory('docsFavorites', FAVORITES_CATEGORY);
+
+/** The user's favorites, newest-first order not guaranteed (see useSidebarSpaces). */
+export const getDocsFavorites = createSelector(
+    [getFavoritePreferences],
+    (preferences): FavoriteRef[] => preferences.
+        map(({name, value}) => parseFavorite(name, value)).
+        filter((ref): ref is FavoriteRef => ref !== null),
+);
+
+/** O(1) membership tests, for the many components that only need a boolean. */
+export const getDocsFavoriteIds = createSelector(
+    [getDocsFavorites],
+    (favorites): Set<string> => new Set(favorites.map((ref) => ref.id)),
+);
+
+/** O(1) type lookup, so a drag doesn't linear-scan the favorites list. */
+export const getDocsFavoriteTypes = createSelector(
+    [getDocsFavorites],
+    (favorites): Map<string, FavoriteType> => new Map(favorites.map((ref) => [ref.id, ref.type])),
+);
+
+export const isDocsFavorite = (state: GlobalState, id: string): boolean => getDocsFavoriteIds(state).has(id);
+
+/**
+ * Favorited page ids grouped by the space that owns them, so the sidebar can nest
+ * them under their space. A page whose space hasn't loaded yet is omitted — its
+ * owner is unknown until then, and there'd be no label to render anyway.
+ */
+export const getDocsFavoritePagesBySpace = createSelector(
+    [getDocsFavorites, getPagesById],
+    (favorites, pagesById): Map<string, string[]> => {
+        const bySpace = new Map<string, string[]>();
+        for (const ref of favorites) {
+            if (ref.type !== 'page') {
+                continue;
+            }
+            const page = pagesById[ref.id];
+            if (!page) {
+                continue;
+            }
+            const pageIds = bySpace.get(page.space_id);
+            if (pageIds) {
+                pageIds.push(ref.id);
+            } else {
+                bySpace.set(page.space_id, [ref.id]);
+            }
+        }
+        return bySpace;
+    },
+);
+
+/**
+ * A space's favorite state, in nested-checkbox terms: `on` when the space itself
+ * is favorited, `partial` when it isn't but one of its pages is, else `off`.
+ */
+export type SpaceFavoriteState = 'on' | 'partial' | 'off';
+
+export function getSpaceFavoriteState(state: GlobalState, spaceId: string): SpaceFavoriteState {
+    if (getDocsFavoriteIds(state).has(spaceId)) {
+        return 'on';
+    }
+    return getDocsFavoritePagesBySpace(state).has(spaceId) ? 'partial' : 'off';
+}
+
+/**
+ * Spaces eligible for the favorites category: explicitly favorited, or holding a
+ * favorited page.
+ *
+ * Team-agnostic, like the preferences it derives from — it can name spaces in
+ * other teams, or ones the user has left. Callers rendering a team's sidebar must
+ * intersect this with that team's loaded spaces before counting it (see
+ * useSidebarSpaces), or an out-of-team favorite inflates the count with no row.
+ */
+export const getDocsFavoriteSpaceIds = createSelector(
+    [getDocsFavorites, getDocsFavoritePagesBySpace],
+    (favorites, pagesBySpace): string[] => {
+        const ids = favorites.filter((ref) => ref.type === 'space').map((ref) => ref.id);
+        const seen = new Set(ids);
+        for (const spaceId of pagesBySpace.keys()) {
+            if (!seen.has(spaceId)) {
+                seen.add(spaceId);
+                ids.push(spaceId);
+            }
+        }
+        return ids;
+    },
+);
diff --git a/webapp/src/store/reducer.test.ts b/webapp/src/store/reducer.test.ts
index eed937f..69a4df7 100644
--- a/webapp/src/store/reducer.test.ts
+++ b/webapp/src/store/reducer.test.ts
@@ -1,139 +1,30 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {PageTypes, SpaceTypes} from './action_types';
-import reducer, {reindexAfterMove} from './reducer';
-import {makePage, makeSpace} from './test_fixtures';
+import {SpaceTypes} from './action_types';
+import reducer from './reducer';
+import {makeSpace} from './test_fixtures';
 
-const withParent = (id: string, parentId: string, title: string, sortOrder: number) => ({
-    ...makePage(id, 'space-a', title, sortOrder),
-    parent_id: parentId,
-});
-
-describe('spaces', () => {
-    const initialState = reducer(undefined, {type: '@@INIT'});
-
-    it('RECEIVED_SPACES merges byId and indexes ids by team', () => {
-        const spaceA = makeSpace('a', 'Space A', 't1');
-        const spaceB = makeSpace('b', 'Space B', 't2');
-
-        const afterFirst = reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceA]});
-        expect(afterFirst.spaces).toEqual({a: spaceA});
-        expect(afterFirst.spacesInTeam.t1).toEqual(new Set(['a']));
+describe('reducer', () => {
+    it('nests the entity slices under `entities`', () => {
+        const initialState = reducer(undefined, {type: '@@INIT'});
 
-        const afterSecond = reducer(afterFirst, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceB]});
-        expect(afterSecond.spaces).toEqual({a: spaceA, b: spaceB});
-        expect(afterSecond.spacesInTeam.t1).toEqual(new Set(['a']));
-        expect(afterSecond.spacesInTeam.t2).toEqual(new Set(['b']));
+        expect(Object.keys(initialState)).toEqual(['entities']);
+        expect(Object.keys(initialState.entities)).toEqual([
+            'spaces',
+            'spacesInTeam',
+            'pages',
+            'pagesInSpace',
+            'spaceMembers',
+        ]);
     });
 
-    it('CREATED_SPACE adds to byId and its team set', () => {
+    it('routes entity actions into the `entities` subtree', () => {
         const spaceA = makeSpace('a', 'Space A', 't1');
-        const spaceB = makeSpace('b', 'Space B', 't1');
-
-        const afterReceive = reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceA]});
-        const afterCreate = reducer(afterReceive, {type: SpaceTypes.CREATED_SPACE, space: spaceB});
-
-        expect(afterCreate.spaces).toEqual({a: spaceA, b: spaceB});
-        expect(afterCreate.spacesInTeam.t1).toEqual(new Set(['a', 'b']));
-    });
-
-    it('DELETED_SPACE prunes byId and the team set', () => {
-        const spaceA = makeSpace('a', 'Space A', 't1');
-        const spaceB = makeSpace('b', 'Space B', 't1');
-
-        const afterReceive = reducer(initialState, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceA, spaceB]});
-        const afterDelete = reducer(afterReceive, {type: SpaceTypes.DELETED_SPACE, spaceId: 'a'});
-
-        expect(afterDelete.spaces).toEqual({b: spaceB});
-        expect(afterDelete.spacesInTeam.t1).toEqual(new Set(['b']));
-    });
-});
-
-describe('pages', () => {
-    const initialState = reducer(undefined, {type: '@@INIT'});
-
-    it('RECEIVED_PAGES merges byId and indexes ids by space', () => {
-        const page1 = makePage('p1', 'space-a', 'Page 1');
-        const page2 = makePage('p2', 'space-a', 'Page 2');
-        const page3 = makePage('p3', 'space-b', 'Page 3');
-
-        const afterFirst = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [page1, page2]});
-        expect(afterFirst.pages).toEqual({p1: page1, p2: page2});
-        expect(afterFirst.pagesInSpace['space-a']).toEqual(new Set(['p1', 'p2']));
-
-        const afterSecond = reducer(afterFirst, {type: PageTypes.RECEIVED_PAGES, pages: [page3]});
-        expect(afterSecond.pages).toEqual({p1: page1, p2: page2, p3: page3});
-        expect(afterSecond.pagesInSpace['space-a']).toEqual(new Set(['p1', 'p2']));
-        expect(afterSecond.pagesInSpace['space-b']).toEqual(new Set(['p3']));
-    });
-
-    it('DELETED_SPACE removes that space\'s pages from byId and its space index', () => {
-        const page1 = makePage('p1', 'space-a', 'Page 1');
-        const page2 = makePage('p2', 'space-b', 'Page 2');
-
-        const afterReceive = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [page1, page2]});
-        const afterDelete = reducer(afterReceive, {type: SpaceTypes.DELETED_SPACE, spaceId: 'space-a'});
-
-        expect(afterDelete.pages).toEqual({p2: page2});
-        expect(afterDelete.pagesInSpace['space-a']).toBeUndefined();
-        expect(afterDelete.pagesInSpace['space-b']).toEqual(new Set(['p2']));
-    });
-
-    it('MOVED_PAGE reindexes the moved page within the store', () => {
-        const a = withParent('a', '', 'A', 0);
-        const b = withParent('b', '', 'B', 1);
-        const c = withParent('c', '', 'C', 2);
-
-        const afterReceive = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [a, b, c]});
-        const afterMove = reducer(afterReceive, {
-            type: PageTypes.MOVED_PAGE,
-            pageId: 'c',
-            spaceId: 'space-a',
-            parentId: '',
-            siblingIndex: 0,
-        });
-
-        expect(afterMove.pages.c.sort_order).toBe(0);
-        expect(afterMove.pages.a.sort_order).toBe(1);
-        expect(afterMove.pages.b.sort_order).toBe(2);
-    });
-});
-
-describe('reindexAfterMove', () => {
-    it('reorders siblings within the same parent (0-based)', () => {
-        const byId = {
-            a: withParent('a', '', 'A', 0),
-            b: withParent('b', '', 'B', 1),
-            c: withParent('c', '', 'C', 2),
-        };
-
-        // Move A to the end.
-        const next = reindexAfterMove(byId, 'a', 'space-a', '', 2);
-
-        expect(next.b.sort_order).toBe(0);
-        expect(next.c.sort_order).toBe(1);
-        expect(next.a.sort_order).toBe(2);
-        expect(next.a.parent_id).toBe('');
-    });
-
-    it('reparents a page and reindexes both the old and new sibling groups', () => {
-        const byId = {
-            p: withParent('p', '', 'Parent', 0),
-            a: withParent('a', '', 'A', 1),
-            b: withParent('b', '', 'B', 2),
-            x: withParent('x', 'p', 'X', 0),
-        };
-
-        // Move B under P as its first child.
-        const next = reindexAfterMove(byId, 'b', 'space-a', 'p', 0);
 
-        expect(next.b.parent_id).toBe('p');
-        expect(next.b.sort_order).toBe(0);
-        expect(next.x.sort_order).toBe(1);
+        const next = reducer(undefined, {type: SpaceTypes.RECEIVED_SPACES, spaces: [spaceA]});
 
-        // Old root group renumbers to fill the gap.
-        expect(next.p.sort_order).toBe(0);
-        expect(next.a.sort_order).toBe(1);
+        expect(next.entities.spaces).toEqual({a: spaceA});
+        expect(next.entities.spacesInTeam.t1).toEqual(new Set(['a']));
     });
 });
diff --git a/webapp/src/store/reducer.ts b/webapp/src/store/reducer.ts
index 0e11316..fe47033 100644
--- a/webapp/src/store/reducer.ts
+++ b/webapp/src/store/reducer.ts
@@ -2,221 +2,11 @@
 // See LICENSE.txt for license information.
 
 import {combineReducers} from 'redux';
-import type {UnknownAction} from 'redux';
 
-import type {Page, Space} from 'types/docs';
+import entities from './entities';
 
-import {PageTypes, SpaceTypes} from './action_types';
+export {reindexAfterMove} from './entities';
 
-type ReceivedSpacesAction = {spaces: Space[]};
-type CreatedSpaceAction = {space: Space};
-type DeletedSpaceAction = {spaceId: string};
-type ReceivedPagesAction = {pages: Page[]};
-type MovedPageAction = {pageId: string; spaceId: string; parentId: string; siblingIndex: number};
-type ReceivedSpaceMembersAction = {spaceId: string; userIds: string[]};
-
-const bySortOrder = (a: Page, b: Page): number =>
-    a.sort_order - b.sort_order || a.title.localeCompare(b.title);
-
-// Moves a page under `newParentId` at `siblingIndex` and renumbers the affected
-// sibling groups' sort_order 0-based, mirroring the server's reindex. Returns a
-// new byId map (untouched pages are shared by reference). Only pages in
-// `spaceId` are considered; a pure reorder (same parent) skips the old group.
-export function reindexAfterMove(
-    byId: Record<string, Page>,
-    pageId: string,
-    spaceId: string,
-    newParentId: string,
-    siblingIndex: number,
-): Record<string, Page> {
-    const moved = byId[pageId];
-    if (!moved) {
-        return byId;
-    }
-    const oldParentId = moved.parent_id;
-    const next = {...byId};
-
-    const groupOf = (parentId: string): Page[] => Object.values(byId).
-        filter((page) => page.space_id === spaceId && page.parent_id === parentId && page.id !== pageId).
-        sort(bySortOrder);
-
-    const newGroup = groupOf(newParentId);
-    const index = Math.max(0, Math.min(siblingIndex, newGroup.length));
-    newGroup.splice(index, 0, moved);
-    newGroup.forEach((page, i) => {
-        next[page.id] = {...page, parent_id: newParentId, sort_order: i};
-    });
-
-    if (oldParentId !== newParentId) {
-        groupOf(oldParentId).forEach((page, i) => {
-            next[page.id] = {...page, sort_order: i};
-        });
-    }
-
-    return next;
-}
-
-// SpaceTypes'/PageTypes' values aren't string-literal types (manifest.id is
-// loaded via JSON.parse), so `action.type` can't discriminate a union by
-// itself — each case casts to its own shape, mirroring the core channels
-// reducer.
-
-// Normalized entity maps (byId) and per-parent Set indices, modeled on core's
-// `channels` + `channelsInTeam`. Sets give O(1) membership/add/remove so
-// high-throughput WebSocket events touch only the affected entity and index.
-
-function spaces(state: Record<string, Space> = {}, action: UnknownAction): Record<string, Space> {
-    switch (action.type) {
-    case SpaceTypes.RECEIVED_SPACES: {
-        const {spaces: received} = action as unknown as ReceivedSpacesAction;
-        if (received.length === 0) {
-            return state;
-        }
-        const next = {...state};
-        for (const space of received) {
-            next[space.id] = space;
-        }
-        return next;
-    }
-    case SpaceTypes.CREATED_SPACE: {
-        const {space} = action as unknown as CreatedSpaceAction;
-        return {...state, [space.id]: space};
-    }
-    case SpaceTypes.DELETED_SPACE: {
-        const {spaceId} = action as unknown as DeletedSpaceAction;
-        if (!(spaceId in state)) {
-            return state;
-        }
-        const next = {...state};
-        delete next[spaceId];
-        return next;
-    }
-    default:
-        return state;
-    }
-}
-
-function addSpaceToTeam(state: Record<string, Set<string>>, space: Space): Record<string, Set<string>> {
-    const next = new Set(state[space.team_id]);
-    next.add(space.id);
-    return {...state, [space.team_id]: next};
-}
-
-function spacesInTeam(state: Record<string, Set<string>> = {}, action: UnknownAction): Record<string, Set<string>> {
-    switch (action.type) {
-    case SpaceTypes.RECEIVED_SPACES: {
-        const {spaces: received} = action as unknown as ReceivedSpacesAction;
-        if (received.length === 0) {
-            return state;
-        }
-        const next = {...state};
-        for (const space of received) {
-            const set = new Set(next[space.team_id]);
-            set.add(space.id);
-            next[space.team_id] = set;
-        }
-        return next;
-    }
-    case SpaceTypes.CREATED_SPACE: {
-        const {space} = action as unknown as CreatedSpaceAction;
-        return addSpaceToTeam(state, space);
-    }
-    case SpaceTypes.DELETED_SPACE: {
-        const {spaceId} = action as unknown as DeletedSpaceAction;
-        const teamId = Object.keys(state).find((id) => state[id].has(spaceId));
-        if (teamId === undefined) {
-            return state;
-        }
-        const set = new Set(state[teamId]);
-        set.delete(spaceId);
-        return {...state, [teamId]: set};
-    }
-    default:
-        return state;
-    }
-}
-
-function pages(state: Record<string, Page> = {}, action: UnknownAction): Record<string, Page> {
-    switch (action.type) {
-    case PageTypes.RECEIVED_PAGES: {
-        const {pages: received} = action as unknown as ReceivedPagesAction;
-        if (received.length === 0) {
-            return state;
-        }
-        const next = {...state};
-        for (const page of received) {
-            next[page.id] = page;
-        }
-        return next;
-    }
-    case PageTypes.MOVED_PAGE: {
-        const {pageId, spaceId, parentId, siblingIndex} = action as unknown as MovedPageAction;
-        if (!(pageId in state)) {
-            return state;
-        }
-        return reindexAfterMove(state, pageId, spaceId, parentId, siblingIndex);
-    }
-    case SpaceTypes.DELETED_SPACE: {
-        const {spaceId} = action as unknown as DeletedSpaceAction;
-        const remaining = Object.entries(state).filter(([, page]) => page.space_id !== spaceId);
-        return remaining.length === Object.keys(state).length ? state : Object.fromEntries(remaining);
-    }
-    default:
-        return state;
-    }
-}
-
-function pagesInSpace(state: Record<string, Set<string>> = {}, action: UnknownAction): Record<string, Set<string>> {
-    switch (action.type) {
-    case PageTypes.RECEIVED_PAGES: {
-        const {pages: received} = action as unknown as ReceivedPagesAction;
-        if (received.length === 0) {
-            return state;
-        }
-        const next = {...state};
-        for (const page of received) {
-            const set = new Set(next[page.space_id]);
-            set.add(page.id);
-            next[page.space_id] = set;
-        }
-        return next;
-    }
-    case SpaceTypes.DELETED_SPACE: {
-        const {spaceId} = action as unknown as DeletedSpaceAction;
-        if (!(spaceId in state)) {
-            return state;
-        }
-        const next = {...state};
-        delete next[spaceId];
-        return next;
-    }
-    default:
-        return state;
-    }
-}
-
-// Space member user ids, keyed by space id. Roles/capabilities are hidden by
-// the server, so this is just membership (count today, avatars later).
-function spaceMembers(state: Record<string, string[]> = {}, action: UnknownAction): Record<string, string[]> {
-    switch (action.type) {
-    case SpaceTypes.RECEIVED_SPACE_MEMBERS: {
-        const {spaceId, userIds} = action as unknown as ReceivedSpaceMembersAction;
-        return {...state, [spaceId]: userIds};
-    }
-    case SpaceTypes.DELETED_SPACE: {
-        const {spaceId} = action as unknown as DeletedSpaceAction;
-        if (!(spaceId in state)) {
-            return state;
-        }
-        const next = {...state};
-        delete next[spaceId];
-        return next;
-    }
-    default:
-        return state;
-    }
-}
-
-const reducer = combineReducers({spaces, spacesInTeam, pages, pagesInSpace, spaceMembers});
+const reducer = combineReducers({entities});
 
 export default reducer;
diff --git a/webapp/src/store/selectors.test.ts b/webapp/src/store/selectors.test.ts
index 57c8c23..4ee77c8 100644
--- a/webapp/src/store/selectors.test.ts
+++ b/webapp/src/store/selectors.test.ts
@@ -18,11 +18,13 @@ describe('getSpacesInTeam', () => {
         const spaceB = makeSpace('b', 'Space B', 't1', 0);
 
         const state = makeState({
-            spaces: {a: spaceA, b: spaceB},
-            spacesInTeam: {t1: new Set(['a', 'b', 'missing'])},
-            pages: {},
-            pagesInSpace: {},
-            spaceMembers: {},
+            entities: {
+                spaces: {a: spaceA, b: spaceB},
+                spacesInTeam: {t1: new Set(['a', 'b', 'missing'])},
+                pages: {},
+                pagesInSpace: {},
+                spaceMembers: {},
+            },
         });
 
         expect(getSpacesInTeam(state, 't1')).toEqual([spaceB, spaceA]);
@@ -36,11 +38,13 @@ describe('getPagesForSpace', () => {
         const page2 = makePage('p2', 'space-b', 'Page 2');
 
         const state = makeState({
-            spaces: {},
-            spacesInTeam: {},
-            pages: {p1: page1, p2: page2},
-            pagesInSpace: {'space-a': new Set(['p1']), 'space-b': new Set(['p2'])},
-            spaceMembers: {},
+            entities: {
+                spaces: {},
+                spacesInTeam: {},
+                pages: {p1: page1, p2: page2},
+                pagesInSpace: {'space-a': new Set(['p1']), 'space-b': new Set(['p2'])},
+                spaceMembers: {},
+            },
         });
 
         expect(getPagesForSpace(state, 'space-a')).toEqual([page1]);
diff --git a/webapp/src/store/selectors.ts b/webapp/src/store/selectors.ts
index 31fad49..75bf055 100644
--- a/webapp/src/store/selectors.ts
+++ b/webapp/src/store/selectors.ts
@@ -10,14 +10,16 @@ import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 
 import type {Page, Space} from 'types/docs';
 
-import type {DocsPluginState} from './types';
+import type {DocsEntitiesState, DocsPluginState} from './types';
 
 const EMPTY_PLUGIN_STATE: DocsPluginState = {
-    spaces: {},
-    spacesInTeam: {},
-    pages: {},
-    pagesInSpace: {},
-    spaceMembers: {},
+    entities: {
+        spaces: {},
+        spacesInTeam: {},
+        pages: {},
+        pagesInSpace: {},
+        spaceMembers: {},
+    },
 };
 
 const EMPTY_SPACES: Space[] = [];
@@ -30,6 +32,8 @@ const EMPTY_PAGES: Page[] = [];
 const pluginState = (state: GlobalState): DocsPluginState =>
     (state as unknown as Record<string, DocsPluginState>)['plugins-' + manifest.id] ?? EMPTY_PLUGIN_STATE;
 
+const entities = (state: GlobalState): DocsEntitiesState => pluginState(state).entities;
+
 const compact = <T>(items: Array<T | undefined>): T[] => items.filter((item): item is T => Boolean(item));
 
 // Derived display order (spaces/pages carry no stored order): sort by the
@@ -51,18 +55,18 @@ const resolvePages = (ids: Set<string> | undefined, byId: Record<string, Page>):
     return compact([...ids].map((id) => byId[id])).sort(bySortOrder);
 };
 
-export const getSpacesById = (state: GlobalState): Record<string, Space> => pluginState(state).spaces;
+export const getSpacesById = (state: GlobalState): Record<string, Space> => entities(state).spaces;
 
-export const getSpacesInTeamIndex = (state: GlobalState): Record<string, Set<string>> => pluginState(state).spacesInTeam;
+export const getSpacesInTeamIndex = (state: GlobalState): Record<string, Set<string>> => entities(state).spacesInTeam;
 
-export const getPagesById = (state: GlobalState): Record<string, Page> => pluginState(state).pages;
+export const getPagesById = (state: GlobalState): Record<string, Page> => entities(state).pages;
 
-export const getPagesInSpaceIndex = (state: GlobalState): Record<string, Set<string>> => pluginState(state).pagesInSpace;
+export const getPagesInSpaceIndex = (state: GlobalState): Record<string, Set<string>> => entities(state).pagesInSpace;
 
 const EMPTY_MEMBER_IDS: string[] = [];
 
 export const getSpaceMemberIds = (state: GlobalState, spaceId: string): string[] =>
-    pluginState(state).spaceMembers[spaceId] ?? EMPTY_MEMBER_IDS;
+    entities(state).spaceMembers[spaceId] ?? EMPTY_MEMBER_IDS;
 
 // Spaces for an explicit team, resolved through the byId map and sorted.
 // Mirrors core's getChannelsInTeam-style read: index Set → entities → order.
@@ -76,6 +80,12 @@ export const getSpacesForCurrentTeam = createSelector(
     (byId, index, teamId) => resolveSpaces(index[teamId], byId),
 );
 
+// Whether the current team's space list has been loaded (see fetchSpaces, which
+// seeds the index entry even for a team with no spaces). Lets consumers tell an
+// unknown space id from one that simply hasn't arrived yet.
+export const areSpacesLoadedForCurrentTeam = (state: GlobalState): boolean =>
+    getCurrentTeamId(state) in getSpacesInTeamIndex(state);
+
 // All spaces the store holds, across every team the user has loaded. Backs the
 // cross-team docs switcher (which finds docs regardless of the current team).
 export const getAllSpaces = createSelector(
diff --git a/webapp/src/store/test_fixtures.ts b/webapp/src/store/test_fixtures.ts
index a432a1f..849fa5c 100644
--- a/webapp/src/store/test_fixtures.ts
+++ b/webapp/src/store/test_fixtures.ts
@@ -24,6 +24,8 @@ export const makePage = (id: string, spaceId: string, title: string, sortOrder =
     type: 'page',
     title,
     body: '',
+    user_id: '',
+    last_modified_by: '',
     sort_order: sortOrder,
     create_at: 0,
     update_at: 0,
diff --git a/webapp/src/store/types.ts b/webapp/src/store/types.ts
index 27e9b10..39096b5 100644
--- a/webapp/src/store/types.ts
+++ b/webapp/src/store/types.ts
@@ -1,6 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type entities from './entities';
 import type reducer from './reducer';
 
 export type DocsPluginState = ReturnType<typeof reducer>;
+
+export type DocsEntitiesState = ReturnType<typeof entities>;
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index a8a791d..c329b50 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -48,8 +48,16 @@ export type UpdateSpacePatch = {
     title?: string;
     description?: string;
     icon?: string;
+
+    // Replaces the whole props map server-side, so callers must send the merged
+    // result rather than just the keys they changed.
+    props?: Record<string, string>;
 };
 
+// Space prop holding the page the space opens to; absent/empty means the space
+// front door (hero).
+export const SPACE_PROP_DEFAULT_PAGE_ID = 'default_page_id';
+
 // Mirrors the server model (server/model/page.go). search_text, user_id,
 // last_modified_by, original_id, and props exist on the server model too; add
 // them as the API/editor lands.
@@ -60,6 +68,10 @@ export type Page = {
     type: string;
     title: string;
     body: string;
+
+    // Author and last editor, returned on both the full page and list summaries.
+    user_id: string;
+    last_modified_by: string;
     sort_order: number;
     create_at: number;
     update_at: number;
@@ -67,6 +79,14 @@ export type Page = {
     delete_at: number;
 };
 
+// The editable fields of a page, as sent to the update-page API. Every field is
+// optional so a patch carries only what changed; the optimistic-lock baseline
+// (base_edit_at) is passed separately.
+export type UpdatePagePatch = {
+    title?: string;
+    body?: string;
+};
+
 // The fields needed to create a page. parentId is omitted for a root page (the
 // data source maps it to the server's parent_id).
 export type CreatePageInput = {
diff --git a/webapp/src/utils/space_icon.tsx b/webapp/src/utils/space_icon.tsx
index de0552e..2f18120 100644
--- a/webapp/src/utils/space_icon.tsx
+++ b/webapp/src/utils/space_icon.tsx
@@ -3,16 +3,22 @@
 
 import React from 'react';
 
-import FileTextOutlineIcon from '@mattermost/compass-icons/components/file-text-outline';
+import GlobeIcon from '@mattermost/compass-icons/components/globe';
+import LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';
 
 import type {Space} from 'types/docs';
 
-// A space's icon: its custom emoji when set, otherwise a generic compass glyph
-// (the product's file-text-outline). Custom emoji/icon picking is deferred, so
-// most spaces render the fallback today. `space` is optional so the create
-// form can render the standard icon before a space exists.
+// A space's icon: its custom emoji when set, otherwise a glyph for its
+// visibility — a globe for a public space, a lock for a private one. Visibility
+// isn't persisted yet (no view_access on the server until PR #10), so an absent
+// value reads as public, the only state the product supports today.
+//
+// The glyph deliberately differs from a page's (file-text/folder): spaces and
+// pages sit side by side in the sidebar's favorites, so they must not look alike.
+// `space` is optional so the create form can render the standard icon before a
+// space exists.
 type Props = {
-    space?: Pick<Space, 'icon'>;
+    space?: Pick<Space, 'icon' | 'visibility'>;
     size: number;
 };
 
@@ -20,5 +26,8 @@ export function SpaceIcon({space, size}: Props): JSX.Element {
     if (space?.icon) {
         return <>{space.icon}</>;
     }
-    return <FileTextOutlineIcon size={size}/>;
+    if (space?.visibility === 'private') {
+        return <LockOutlineIcon size={size}/>;
+    }
+    return <GlobeIcon size={size}/>;
 }
diff --git a/webapp/src/webapp_globals.ts b/webapp/src/webapp_globals.ts
index 8ec2aa5..cf08ce9 100644
--- a/webapp/src/webapp_globals.ts
+++ b/webapp/src/webapp_globals.ts
@@ -74,7 +74,12 @@ type HostComponents = {
 
 const hostComponents = (): HostComponents => (window as unknown as {Components?: HostComponents}).Components ?? {};
 
-export const Timestamp = hostComponents().Timestamp;
+// Renders the host Timestamp, or nothing on a host that doesn't publish it. The
+// fallback lives here so callers just render <Timestamp/> without a null check.
+export const Timestamp = (props: TimestampProps): ReactElement | null => {
+    const HostTimestamp = hostComponents().Timestamp;
+    return HostTimestamp ? React.createElement(HostTimestamp, props) : null;
+};
 
 // Renders the host Avatar, or nothing on a host that doesn't publish it. The
 // fallback lives here so callers just render <Avatar/> without a null check.
diff --git a/webapp/tests/react_testing_utils.tsx b/webapp/tests/react_testing_utils.tsx
index 2ceb45c..4d517c1 100644
--- a/webapp/tests/react_testing_utils.tsx
+++ b/webapp/tests/react_testing_utils.tsx
@@ -15,9 +15,9 @@ import type {Middleware, Store} from 'redux';
 
 import type {GlobalState} from '@mattermost/types/store';
 
-import type {DocsPluginState} from 'store/types';
+import type {DocsEntitiesState} from 'store/types';
 
-const EMPTY_DOCS_STATE: DocsPluginState = {
+const EMPTY_DOCS_ENTITIES: DocsEntitiesState = {
     spaces: {},
     spacesInTeam: {},
     pages: {},
@@ -29,7 +29,7 @@ type TestTeam = {id: string; name: string; display_name?: string};
 type TestUser = {id: string; username?: string; first_name?: string; last_name?: string; nickname?: string};
 
 export type TestStateOptions = {
-    docs?: Partial<DocsPluginState>;
+    docs?: Partial<DocsEntitiesState>;
     currentTeam?: TestTeam;
 
     // The user's teams (for cross-team reads like the switcher). Defaults to just
@@ -47,7 +47,7 @@ export function makeTestState({docs, currentTeam, teams, currentUser}: TestState
     const allTeams = teams ?? (currentTeam ? [currentTeam] : []);
 
     return {
-        ['plugins-' + manifest.id]: {...EMPTY_DOCS_STATE, ...docs},
+        ['plugins-' + manifest.id]: {entities: {...EMPTY_DOCS_ENTITIES, ...docs}},
         entities: {
             teams: {
                 currentTeamId: teamId,

From 4cba8f5601fe57656312ea902ea2f8b0365c78c1 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 08:42:33 -0500
Subject: [PATCH 25/68] feat(docs): make the page tree keyboard-navigable

Restructure the tree so `role="treeitem"` sits on the node wrapper that owns
the child group, giving the tree a single tab stop (roving tabindex) with
arrow-key traversal, Alt+arrow reordering, and Shift+F10/Menu to open a row's
actions. Reorder intent resolution lives in a pure `keyboard.ts` module so the
depth and sibling rules are testable without the DOM.

Add a `Readout` live region for the announcements this needs (moves, blocked
moves, create/move failures), and controlled open state on Menu/PageMenu so a
row can open its own menu from the keyboard.

Also folded in while touching these paths:
- gate the Home welcome hero on spaces actually being loaded, so it no longer
  flashes for returning users
- extract `useLeaveSpace`, and surface a toast when archiving a space fails
- fix sidebar order to use prefixed favorite keys for both lists
- pass the resolved page into PageContent instead of re-selecting it
- tests for the tree panel, keyboard rules, leave-space, actions, and stores

Prompt: commit wip review changes
---
 webapp/i18n/en.json                           |   9 +
 .../components/docs_home/docs_home.test.tsx   |  19 +-
 webapp/src/components/docs_home/docs_home.tsx |  15 ++
 webapp/src/components/docs_root/docs_root.tsx |   2 +
 webapp/src/components/menu/menu.tsx           |  30 ++-
 .../src/components/modals/modal_store.test.ts |  86 +++++++
 webapp/src/components/page_menu/page_menu.tsx |   9 +-
 webapp/src/components/readout/index.ts        |   5 +
 .../components/readout/readout.module.scss    |  13 +
 webapp/src/components/readout/readout.tsx     |  42 ++++
 .../src/components/readout/readout_store.ts   |  58 +++++
 .../components/space_info/space_info_menu.tsx |   2 +-
 .../space_view/page_content/page_content.tsx  |  13 +-
 .../page_content_placeholder.module.scss      |   4 -
 .../src/components/space_view/page_header.tsx |   8 +
 .../src/components/space_view/page_hero.tsx   |   2 +-
 .../space_view/page_tree/keyboard.test.ts     | 117 +++++++++
 .../space_view/page_tree/keyboard.ts          | 134 +++++++++++
 .../page_tree/page_tree_node.module.scss      |  19 +-
 .../space_view/page_tree/page_tree_node.tsx   |  71 ++++--
 .../page_tree/page_tree_panel.module.scss     |  14 ++
 .../page_tree/page_tree_panel.test.tsx        | 207 ++++++++++++++++
 .../space_view/page_tree/page_tree_panel.tsx  | 225 +++++++++++++++++-
 .../components/space_view/space_header.tsx    |  53 ++---
 .../src/components/space_view/space_view.tsx  |  17 +-
 .../components/spaces_sidebar/space_item.tsx  |   5 +-
 .../spaces_sidebar/space_item_menu.tsx        |  23 +-
 .../use_sidebar_spaces.test.tsx               |  84 +++++++
 .../spaces_sidebar/use_sidebar_spaces.ts      |  40 ++--
 webapp/src/data/api_data_source.ts            |  28 ++-
 webapp/src/data/collapsed_pages.ts            |   4 -
 webapp/src/data/favorites.test.ts             |  14 ++
 webapp/src/hooks/leave_space.test.tsx         | 106 +++++++++
 webapp/src/hooks/leave_space.ts               |  53 +++++
 webapp/src/hooks/page_tree.ts                 |  47 +++-
 webapp/src/hooks/pages.test.tsx               |  91 +++++++
 webapp/src/hooks/pages.ts                     |   7 +-
 webapp/src/hooks/spaces.ts                    |  10 +-
 webapp/src/store/actions.test.ts              | 108 +++++++++
 webapp/src/store/actions.ts                   |  18 +-
 webapp/src/store/entities.ts                  |  12 +-
 webapp/src/store/favorites.test.ts            |  93 ++++++++
 webapp/src/store/selectors.ts                 |  20 ++
 webapp/tests/react_testing_utils.tsx          |  13 +-
 44 files changed, 1793 insertions(+), 157 deletions(-)
 create mode 100644 webapp/src/components/modals/modal_store.test.ts
 create mode 100644 webapp/src/components/readout/index.ts
 create mode 100644 webapp/src/components/readout/readout.module.scss
 create mode 100644 webapp/src/components/readout/readout.tsx
 create mode 100644 webapp/src/components/readout/readout_store.ts
 create mode 100644 webapp/src/components/space_view/page_tree/keyboard.test.ts
 create mode 100644 webapp/src/components/space_view/page_tree/keyboard.ts
 create mode 100644 webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx
 create mode 100644 webapp/src/components/spaces_sidebar/use_sidebar_spaces.test.tsx
 create mode 100644 webapp/src/hooks/leave_space.test.tsx
 create mode 100644 webapp/src/hooks/leave_space.ts
 create mode 100644 webapp/src/hooks/pages.test.tsx
 create mode 100644 webapp/src/store/actions.test.ts
 create mode 100644 webapp/src/store/favorites.test.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 38a1b03..0abb06b 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1,5 +1,7 @@
 {
   "docs.archiveSpace.confirm": "Yes, archive space",
+  "docs.archiveSpace.error.generic": "Something went wrong. Please try again.",
+  "docs.archiveSpace.error.title": "Unable to archive {name}",
   "docs.archiveSpace.message": "Are you sure you want to archive the <b>{name}</b> space? Members will lose access until it is restored.",
   "docs.archiveSpace.title": "Archive {name}",
   "docs.basicInputModal.cancel": "Cancel",
@@ -84,11 +86,18 @@
   "docs.pageMenu.unfavorite": "Remove from favorites",
   "docs.pageMenu.versionHistory": "Version history",
   "docs.pageTree.add": "Add page",
+  "docs.pageTree.addFailed": "Could not create the page. Please try again.",
   "docs.pageTree.collapse": "Collapse {title}",
   "docs.pageTree.expand": "Expand {title}",
   "docs.pageTree.favorited": "Favorited",
+  "docs.pageTree.keyboardHelp": "Use the arrow keys to move through pages. Hold Alt with an arrow key to move the selected page up, down, in, or out.",
   "docs.pageTree.menu": "Page options for {title}",
+  "docs.pageTree.moveBlocked": "Cannot move {title} any further in that direction.",
+  "docs.pageTree.moveFailed": "Could not move the page. Please try again.",
+  "docs.pageTree.moved": "Moved {title} to position {position} under {parent}.",
+  "docs.pageTree.nestBlocked": "Cannot nest {title} deeper than {levels} levels.",
   "docs.pageTree.overview": "Overview",
+  "docs.pageTree.topLevel": "top level",
   "docs.pageTree.untitled": "Untitled",
   "docs.renamePage.confirm": "Save",
   "docs.renamePage.label": "Page name",
diff --git a/webapp/src/components/docs_home/docs_home.test.tsx b/webapp/src/components/docs_home/docs_home.test.tsx
index 397a80f..b516636 100644
--- a/webapp/src/components/docs_home/docs_home.test.tsx
+++ b/webapp/src/components/docs_home/docs_home.test.tsx
@@ -19,14 +19,28 @@ jest.mock('hooks/user', () => ({useCurrentUser: () => ({name: 'Sam'})}));
 jest.mock('hooks/navigation', () => ({useDocsNavigation: () => ({goToSpace: mockGoToSpace})}));
 jest.mock('hooks/spaces', () => ({useRecentSpaceSummaries: () => mockSummaries}));
 
+const TEAM = {id: 'team1', name: 'team-1'};
+
+// An entry for the team means "this team's spaces are loaded" (see
+// areSpacesLoadedForCurrentTeam); without it Home can't tell an empty team from
+// one whose spaces are still in flight.
+const spacesLoaded = {currentTeam: TEAM, docs: {spacesInTeam: {[TEAM.id]: new Set<string>()}}};
+
 describe('DocsHome', () => {
     beforeEach(() => {
         mockSummaries = [];
     });
 
+    it('renders only the header until the team spaces have loaded', () => {
+        renderWithContext(<DocsHome onCreateSpace={jest.fn()}/>, {state: {currentTeam: TEAM}});
+
+        expect(screen.getByRole('button', {name: 'New Space'})).toBeInTheDocument();
+        expect(screen.queryByText('Welcome to Docs.')).not.toBeInTheDocument();
+    });
+
     it('shows the welcome hero and wires the create CTAs when there are no spaces', () => {
         const onCreateSpace = jest.fn();
-        renderWithContext(<DocsHome onCreateSpace={onCreateSpace}/>);
+        renderWithContext(<DocsHome onCreateSpace={onCreateSpace}/>, {state: spacesLoaded});
 
         expect(screen.getByText('Welcome to Docs.')).toBeInTheDocument();
 
@@ -42,6 +56,7 @@ describe('DocsHome', () => {
                 onCreateSpace={jest.fn()}
                 onBrowseSpaces={onBrowseSpaces}
             />,
+            {state: spacesLoaded},
         );
 
         fireEvent.click(screen.getByRole('button', {name: 'Browse spaces'}));
@@ -51,7 +66,7 @@ describe('DocsHome', () => {
     it('greets the user and lists recent spaces, navigating on click', () => {
         mockSummaries = [{space: {...makeSpace('eng', 'Engineering'), icon: '📘'}, pageCount: 3, lastViewedAt: Date.now() - (12 * 60 * 1000)}];
 
-        renderWithContext(<DocsHome onCreateSpace={jest.fn()}/>);
+        renderWithContext(<DocsHome onCreateSpace={jest.fn()}/>, {state: spacesLoaded});
 
         expect(screen.getByText(/Good (morning|afternoon|evening), Sam\./)).toBeInTheDocument();
 
diff --git a/webapp/src/components/docs_home/docs_home.tsx b/webapp/src/components/docs_home/docs_home.tsx
index 1702e69..4bb0961 100644
--- a/webapp/src/components/docs_home/docs_home.tsx
+++ b/webapp/src/components/docs_home/docs_home.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {useDocsNavigation} from 'hooks/navigation';
+import {useAppSelector} from 'hooks/redux';
 import {useRecentSpaceSummaries} from 'hooks/spaces';
 import {useCurrentUser} from 'hooks/user';
 import React from 'react';
@@ -15,6 +16,8 @@ import NotebookOutlineIcon from '@mattermost/compass-icons/components/notebook-o
 import PlusIcon from '@mattermost/compass-icons/components/plus';
 import SearchListIcon from '@mattermost/compass-icons/components/search-list';
 
+import {areSpacesLoadedForCurrentTeam} from 'store/selectors';
+
 import {PrimaryButton, TertiaryButton} from 'components/form_controls/button';
 import Header from 'components/header/header';
 
@@ -36,6 +39,7 @@ const DocsHome = ({onCreateSpace, onBrowseSpaces}: Props) => {
     const {name} = useCurrentUser();
     const {goToSpace} = useDocsNavigation();
     const summaries = useRecentSpaceSummaries();
+    const spacesLoaded = useAppSelector(areSpacesLoadedForCurrentTeam);
 
     const header = (
         <Header
@@ -56,6 +60,17 @@ const DocsHome = ({onCreateSpace, onBrowseSpaces}: Props) => {
         />
     );
 
+    // Only an empty list that's actually settled means "no spaces". Until the
+    // team's spaces arrive the list is empty for a different reason, and showing
+    // the welcome hero would flash it at every returning user.
+    if (!spacesLoaded) {
+        return (
+            <div className={styles.root}>
+                {header}
+            </div>
+        );
+    }
+
     if (summaries.length === 0) {
         return (
             <div className={styles.root}>
diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index d8dc03e..58fc4ae 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -10,6 +10,7 @@ import {useHotkeys} from 'react-hotkeys-hook';
 import CreateSpaceModal from 'components/create_space_modal/create_space_modal';
 import DocsSwitcher from 'components/docs_switcher/docs_switcher';
 import {DocsModalController, openDocsModal} from 'components/modals';
+import {Readout} from 'components/readout';
 import SpacesSidebar from 'components/spaces_sidebar/spaces_sidebar';
 import {DocsToaster} from 'components/toast';
 
@@ -54,6 +55,7 @@ const DocsRoot = () => {
             {switcherOpen && <DocsSwitcher onClose={closeSwitcher}/>}
             <DocsModalController/>
             <DocsToaster/>
+            <Readout/>
         </div>
     );
 };
diff --git a/webapp/src/components/menu/menu.tsx b/webapp/src/components/menu/menu.tsx
index b00efef..77d0dff 100644
--- a/webapp/src/components/menu/menu.tsx
+++ b/webapp/src/components/menu/menu.tsx
@@ -17,6 +17,11 @@ type MenuProps = {
 
     // Base UI merges its own open/aria/ref props onto the trigger element.
     trigger: React.ReactElement;
+
+    // Controlled open state. Only needed when something other than the trigger
+    // opens the menu (e.g. a keyboard shortcut on the surrounding row).
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     children: React.ReactNode;
 };
 
@@ -46,12 +51,26 @@ type SubmenuProps = {
 
 const ItemBody = ({leadingIcon, trailingIcon, secondaryLabel, children}: Pick<ItemProps, 'leadingIcon' | 'trailingIcon' | 'secondaryLabel' | 'children'>) => (
     <>
-        {leadingIcon && <span className={styles.itemIcon}>{leadingIcon}</span>}
+        {leadingIcon && (
+            <span
+                className={styles.itemIcon}
+                aria-hidden={true}
+            >
+                {leadingIcon}
+            </span>
+        )}
         <span className={styles.itemText}>
             <span className={styles.itemLabel}>{children}</span>
             {secondaryLabel && <span className={styles.itemSecondary}>{secondaryLabel}</span>}
         </span>
-        {trailingIcon && <span className={styles.itemTrailing}>{trailingIcon}</span>}
+        {trailingIcon && (
+            <span
+                className={styles.itemTrailing}
+                aria-hidden={true}
+            >
+                {trailingIcon}
+            </span>
+        )}
     </>
 );
 
@@ -147,8 +166,11 @@ const MenuSubmenu = ({label, leadingIcon, ariaLabel, disabled, children}: Submen
  * `Menu.Submenu` children. Portals to the body so it is never clipped by an
  * ancestor's overflow.
  */
-const Menu = ({ariaLabel, align = 'left', tooltip, trigger, children}: MenuProps) => (
-    <BaseMenu.Root>
+const Menu = ({ariaLabel, align = 'left', tooltip, trigger, open, onOpenChange, children}: MenuProps) => (
+    <BaseMenu.Root
+        open={open}
+        onOpenChange={onOpenChange}
+    >
         {tooltip ? (
             <WithTooltip title={tooltip}>
                 <BaseMenu.Trigger render={trigger}/>
diff --git a/webapp/src/components/modals/modal_store.test.ts b/webapp/src/components/modals/modal_store.test.ts
new file mode 100644
index 0000000..5b20caa
--- /dev/null
+++ b/webapp/src/components/modals/modal_store.test.ts
@@ -0,0 +1,86 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {
+    closeAllDocsModals,
+    closeDocsModal,
+    getDocsModalStack,
+    openDocsModal,
+    subscribeToDocsModals,
+} from './modal_store';
+
+describe('modal store', () => {
+    afterEach(() => {
+        closeAllDocsModals();
+    });
+
+    it('stacks modals in the order they were opened', () => {
+        const first = openDocsModal('one');
+        const second = openDocsModal('two');
+
+        expect(getDocsModalStack().map((entry) => entry.handle.id)).toEqual([first.id, second.id]);
+    });
+
+    it('pops only the modal a handle refers to, whatever its position', () => {
+        const first = openDocsModal('one');
+        const second = openDocsModal('two');
+
+        first.close();
+
+        expect(getDocsModalStack().map((entry) => entry.handle.id)).toEqual([second.id]);
+    });
+
+    it('wraps a plain node so callers can always render through the entry', () => {
+        const handle = openDocsModal('content');
+
+        expect(getDocsModalStack()[0].render(handle)).toBe('content');
+    });
+
+    it('passes the handle to a render function', () => {
+        const render = jest.fn(() => 'rendered');
+        const handle = openDocsModal(render);
+
+        getDocsModalStack()[0].render(handle);
+
+        expect(render).toHaveBeenCalledWith(handle);
+    });
+
+    it('notifies subscribers on open and close, and stops after unsubscribe', () => {
+        const listener = jest.fn();
+        const unsubscribe = subscribeToDocsModals(listener);
+
+        const handle = openDocsModal('one');
+        expect(listener).toHaveBeenCalledTimes(1);
+
+        handle.close();
+        expect(listener).toHaveBeenCalledTimes(2);
+
+        unsubscribe();
+        openDocsModal('two');
+        expect(listener).toHaveBeenCalledTimes(2);
+    });
+
+    // Guards against a stale handle (a modal already closed another way) waking
+    // every subscriber for a no-op.
+    it('does not notify when closing an id that is not on the stack', () => {
+        const listener = jest.fn();
+        const unsubscribe = subscribeToDocsModals(listener);
+
+        closeDocsModal('docs-modal-nope');
+        expect(listener).not.toHaveBeenCalled();
+
+        closeAllDocsModals();
+        expect(listener).not.toHaveBeenCalled();
+
+        unsubscribe();
+    });
+
+    it('clears the whole stack at once', () => {
+        openDocsModal('one');
+        openDocsModal('two');
+
+        closeAllDocsModals();
+
+        expect(getDocsModalStack()).toEqual([]);
+    });
+});
diff --git a/webapp/src/components/page_menu/page_menu.tsx b/webapp/src/components/page_menu/page_menu.tsx
index 61b7d06..6985620 100644
--- a/webapp/src/components/page_menu/page_menu.tsx
+++ b/webapp/src/components/page_menu/page_menu.tsx
@@ -40,13 +40,18 @@ type Props = {
     trigger: React.ReactElement;
     align?: 'left' | 'right';
     tooltip?: string;
+
+    // Controlled open state, for callers that open the menu from a keyboard
+    // shortcut rather than the trigger (see the page tree's rows).
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
 
 /**
  * The page actions menu, shared by the page tree rows and the page header.
  * Items without a handler are scaffolding for features that have no API yet.
  */
-const PageMenu = ({spaceId, pageId, pageTitle, trigger, align = 'left', tooltip}: Props) => {
+const PageMenu = ({spaceId, pageId, pageTitle, trigger, align = 'left', tooltip, open, onOpenChange}: Props) => {
     const {formatMessage} = useIntl();
     const {paths} = useDocsNavigation();
     const dispatch = useAppDispatch();
@@ -91,6 +96,8 @@ const PageMenu = ({spaceId, pageId, pageTitle, trigger, align = 'left', tooltip}
             align={align}
             tooltip={tooltip}
             trigger={trigger}
+            open={open}
+            onOpenChange={onOpenChange}
         >
             <Menu.Item
                 leadingIcon={favorited ? <StarIcon size={18}/> : <StarOutlineIcon size={18}/>}
diff --git a/webapp/src/components/readout/index.ts b/webapp/src/components/readout/index.ts
new file mode 100644
index 0000000..0e1abde
--- /dev/null
+++ b/webapp/src/components/readout/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export {default as Readout} from './readout';
+export {announce, clearReadout, getReadoutMessage, getReadoutState, subscribeToReadout} from './readout_store';
diff --git a/webapp/src/components/readout/readout.module.scss b/webapp/src/components/readout/readout.module.scss
new file mode 100644
index 0000000..07258de
--- /dev/null
+++ b/webapp/src/components/readout/readout.module.scss
@@ -0,0 +1,13 @@
+// Core uses its global `.sr-only`; scoped here so the plugin doesn't depend on a
+// host class staying put.
+.readout {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
diff --git a/webapp/src/components/readout/readout.tsx b/webapp/src/components/readout/readout.tsx
new file mode 100644
index 0000000..3e15e96
--- /dev/null
+++ b/webapp/src/components/readout/readout.tsx
@@ -0,0 +1,42 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect, useSyncExternalStore} from 'react';
+
+import styles from './readout.module.scss';
+import {clearReadout, getReadoutState, subscribeToReadout} from './readout_store';
+
+// Core clears after 2s so a stale message isn't re-read when focus returns to the
+// region (webapp/channels/src/components/readout).
+const CLEAR_DELAY = 2000;
+
+/**
+ * The Docs live region: one per product, mounted at the Docs root. Announces
+ * whatever `announce()` last passed, then empties itself.
+ */
+const Readout = () => {
+    const {message, nonce} = useSyncExternalStore(subscribeToReadout, getReadoutState);
+
+    // Keyed on the nonce so each announcement resets its own timer: a newer message
+    // can't be wiped early by the previous one's pending clear.
+    useEffect(() => {
+        if (!message) {
+            return undefined;
+        }
+        const timeout = setTimeout(clearReadout, CLEAR_DELAY);
+        return () => clearTimeout(timeout);
+    }, [message, nonce]);
+
+    return (
+        <div
+            className={styles.readout}
+            role='status'
+            aria-live='polite'
+            aria-atomic='true'
+        >
+            <span key={nonce}>{message}</span>
+        </div>
+    );
+};
+
+export default Readout;
diff --git a/webapp/src/components/readout/readout_store.ts b/webapp/src/components/readout/readout_store.ts
new file mode 100644
index 0000000..b4a1402
--- /dev/null
+++ b/webapp/src/components/readout/readout_store.ts
@@ -0,0 +1,58 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export type ReadoutState = {
+    message: string;
+
+    // Bumped on every announcement. `<Readout/>` keys its text node on this, so an
+    // identical message still replaces the node — assistive tech announces DOM
+    // mutations inside a live region, and re-rendering the same string is not one.
+    // Clearing state and re-setting it in the same tick would not work: React
+    // batches both updates into one commit, so the blank never reaches the DOM.
+    nonce: number;
+};
+
+// Ported from core's readout (webapp/channels/src/components/readout + the
+// SET_READOUT/CLEAR_READOUT reducer): one live region for the whole product, fed
+// imperatively, cleared shortly after. Core carries the message in Redux; this
+// uses the same module-store transport as the Docs toast and modal controllers so
+// non-component code can announce without a dispatch.
+let state: ReadoutState = {message: '', nonce: 0};
+
+const listeners = new Set<() => void>();
+
+// The snapshot identity only changes when the state does, which is what
+// useSyncExternalStore requires.
+const setState = (next: ReadoutState) => {
+    state = next;
+    listeners.forEach((listener) => listener());
+};
+
+export const subscribeToReadout = (listener: () => void) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+
+export const getReadoutState = (): ReadoutState => state;
+
+/** The text currently in the live region. Exported for tests. */
+export const getReadoutMessage = (): string => state.message;
+
+export const clearReadout = () => {
+    if (state.message !== '') {
+        setState({message: '', nonce: state.nonce + 1});
+    }
+};
+
+/**
+ * Announces `text` to screen readers via the Docs live region, without moving
+ * focus. Use for outcomes that are only conveyed visually — a page moved, a list
+ * reordered — where a toast would be too heavy.
+ *
+ * Announcing the same text twice in a row announces twice.
+ */
+export const announce = (text: string) => {
+    setState({message: text, nonce: state.nonce + 1});
+};
diff --git a/webapp/src/components/space_info/space_info_menu.tsx b/webapp/src/components/space_info/space_info_menu.tsx
index d924c3c..c842ce7 100644
--- a/webapp/src/components/space_info/space_info_menu.tsx
+++ b/webapp/src/components/space_info/space_info_menu.tsx
@@ -61,7 +61,7 @@ const SpaceInfoMenuItem = ({icon, text, badge, opensPanel, onClick}: ItemProps)
 
 type Props = {
     space: Space;
-    memberCount: number;
+    memberCount?: number;
 
     /** Drills the panel into its members view. */
     onShowMembers: () => void;
diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
index 2a5664f..891af67 100644
--- a/webapp/src/components/space_view/page_content/page_content.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -3,7 +3,6 @@
 
 import classNames from 'classnames';
 import {useUserProfile} from 'hooks/members';
-import {useAppSelector} from 'hooks/redux';
 import React from 'react';
 import {useIntl} from 'react-intl';
 import {Avatar} from 'webapp_globals';
@@ -11,8 +10,6 @@ import {Avatar} from 'webapp_globals';
 import EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';
 import ImageOutlineIcon from '@mattermost/compass-icons/components/image-outline';
 
-import {getPage} from 'store/selectors';
-
 import {Button} from 'components/form_controls/button';
 
 import type {Page} from 'types/docs';
@@ -21,15 +18,17 @@ import styles from './page_content.module.scss';
 import PageContentPlaceholder from './page_content_placeholder';
 
 type Props = {
-    pageId: string;
+
+    // Resolved and space-validated by the caller; undefined only while the
+    // space's pages are still loading (an id that doesn't belong to the space
+    // redirects instead of rendering here).
+    page?: Page;
 };
 
 // The selected page's content column: a title area over the page body. The body
 // is a skeleton until the editor is mounted, which also covers the window where
 // the routed page hasn't arrived in the store yet (no title to show).
-const PageContent = ({pageId}: Props) => {
-    const page = useAppSelector((state) => getPage(state, pageId));
-
+const PageContent = ({page}: Props) => {
     return (
         <div className={styles.frame}>
             <article className={styles.article}>
diff --git a/webapp/src/components/space_view/page_content/page_content_placeholder.module.scss b/webapp/src/components/space_view/page_content/page_content_placeholder.module.scss
index 4b2810b..be88006 100644
--- a/webapp/src/components/space_view/page_content/page_content_placeholder.module.scss
+++ b/webapp/src/components/space_view/page_content/page_content_placeholder.module.scss
@@ -15,10 +15,6 @@
     gap: 10px;
 }
 
-.block + .block {
-    margin-top: 12px;
-}
-
 .heading,
 .line {
     height: 12px;
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 43af951..9528a41 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -29,6 +29,13 @@ import {DEFAULT_SIDEBAR_WIDTH} from './sidebar/sidebar';
 // the tree references it via aria-labelledby.
 export const PAGES_SECTION_LABEL_ID = 'docsPagesToggle';
 
+// The page tree's keyboard instructions live in the tree panel but are referenced
+// from the toggle too: `aria-describedby` is only announced when the described
+// element takes focus, and the tree container never does — focus always lands on a
+// row. The toggle is the focusable thing right before the tree, so describing it
+// is what actually reaches a screen reader on the way in.
+export const PAGES_KEYBOARD_HELP_ID = 'docsPageTreeHelp';
+
 // Mirrors `.bar`'s inline-start padding, which the pages cluster has to discount
 // from the sidebar width to land on the sidebar's right edge.
 const BAR_INLINE_START_PADDING = 8;
@@ -92,6 +99,7 @@ const PageHeader = ({space, page, treeOpen, onTogglePages}: Props) => {
             >
                 <Button
                     id={PAGES_SECTION_LABEL_ID}
+                    aria-describedby={treeOpen ? PAGES_KEYBOARD_HELP_ID : undefined}
                     emphasis='quaternary'
                     size='sm'
                     className={classNames('docs-btn-neutral', styles.iconLabel, {active: treeOpen})}
diff --git a/webapp/src/components/space_view/page_hero.tsx b/webapp/src/components/space_view/page_hero.tsx
index 886f178..5be7892 100644
--- a/webapp/src/components/space_view/page_hero.tsx
+++ b/webapp/src/components/space_view/page_hero.tsx
@@ -22,7 +22,7 @@ type Stat = {
 type Props = {
     space: Space;
     pageCount: number;
-    memberCount: number;
+    memberCount?: number;
 };
 
 // Space front-door banner: icon + title, description, and a stats row. Page and
diff --git a/webapp/src/components/space_view/page_tree/keyboard.test.ts b/webapp/src/components/space_view/page_tree/keyboard.test.ts
new file mode 100644
index 0000000..61ec7ec
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/keyboard.test.ts
@@ -0,0 +1,117 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {buildPageTree} from 'store/page_tree';
+import {makePage} from 'store/test_fixtures';
+
+import type {Page} from 'types/docs';
+
+import {MAX_PAGE_LEVELS, buildSubtreeHeightMap} from './depth';
+import {flattenVisibleRows, resolveReorder} from './keyboard';
+
+const child = (id: string, parentId: string, sortOrder = 0): Page => ({
+    ...makePage(id, 'space1', id, sortOrder),
+    parent_id: parentId,
+});
+
+// a
+//   a1
+//   a2
+// b
+const pages: Page[] = [
+    makePage('a', 'space1', 'a', 0),
+    child('a1', 'a', 0),
+    child('a2', 'a', 1),
+    makePage('b', 'space1', 'b', 1),
+];
+
+const treeOf = (list: Page[]) => {
+    const roots = buildPageTree(list);
+    return {roots, heights: buildSubtreeHeightMap(roots)};
+};
+
+// A chain of `levels` pages, each nested in the previous one.
+const chain = (levels: number): Page[] =>
+    Array.from({length: levels}, (_, i) => (i === 0 ? makePage('p0', 'space1', 'p0') : child(`p${i}`, `p${i - 1}`)));
+
+describe('flattenVisibleRows', () => {
+    it('lists rows in visual order with their parent', () => {
+        const {roots} = treeOf(pages);
+
+        expect(flattenVisibleRows(roots, new Set()).map((row) => [row.node.page.id, row.parentId])).toEqual([
+            ['a', ''],
+            ['a1', 'a'],
+            ['a2', 'a'],
+            ['b', ''],
+        ]);
+    });
+
+    it('omits the subtree of a collapsed node', () => {
+        const {roots} = treeOf(pages);
+
+        expect(flattenVisibleRows(roots, new Set(['a'])).map((row) => row.node.page.id)).toEqual(['a', 'b']);
+    });
+});
+
+describe('resolveReorder', () => {
+    it('moves a page up and down within its sibling group', () => {
+        const {roots, heights} = treeOf(pages);
+
+        expect(resolveReorder(roots, heights, 'a2', 'up')).toEqual({move: {pageId: 'a2', parentId: 'a', siblingIndex: 0}});
+        expect(resolveReorder(roots, heights, 'a1', 'down')).toEqual({move: {pageId: 'a1', parentId: 'a', siblingIndex: 1}});
+    });
+
+    it('refuses to move past the ends of the sibling group', () => {
+        const {roots, heights} = treeOf(pages);
+
+        expect(resolveReorder(roots, heights, 'a1', 'up')).toEqual({blocked: 'boundary'});
+        expect(resolveReorder(roots, heights, 'a2', 'down')).toEqual({blocked: 'boundary'});
+    });
+
+    it('indents under the preceding sibling as its last child', () => {
+        const {roots, heights} = treeOf(pages);
+
+        expect(resolveReorder(roots, heights, 'b', 'indent')).toEqual({move: {pageId: 'b', parentId: 'a', siblingIndex: 2}});
+    });
+
+    it('refuses to indent the first of a sibling group', () => {
+        const {roots, heights} = treeOf(pages);
+
+        expect(resolveReorder(roots, heights, 'a', 'indent')).toEqual({blocked: 'boundary'});
+        expect(resolveReorder(roots, heights, 'a1', 'indent')).toEqual({blocked: 'boundary'});
+    });
+
+    it('outdents to just after the former parent', () => {
+        const {roots, heights} = treeOf(pages);
+
+        expect(resolveReorder(roots, heights, 'a1', 'outdent')).toEqual({move: {pageId: 'a1', parentId: '', siblingIndex: 1}});
+    });
+
+    it('refuses to outdent a root page', () => {
+        const {roots, heights} = treeOf(pages);
+
+        expect(resolveReorder(roots, heights, 'a', 'outdent')).toEqual({blocked: 'boundary'});
+    });
+
+    it('refuses an indent that would push the moved subtree past the depth cap', () => {
+        // A full-depth chain, plus a sibling of its root to indent under.
+        const list = [...chain(MAX_PAGE_LEVELS), makePage('sibling', 'space1', 'sibling', -1)];
+        const {roots, heights} = treeOf(list);
+
+        expect(heights.get('p0')).toBe(MAX_PAGE_LEVELS - 1);
+        expect(resolveReorder(roots, heights, 'p0', 'indent')).toEqual({blocked: 'depth'});
+    });
+
+    it('allows an indent that lands exactly on the depth cap', () => {
+        const list = [...chain(MAX_PAGE_LEVELS - 1), makePage('sibling', 'space1', 'sibling', -1)];
+        const {roots, heights} = treeOf(list);
+
+        expect(resolveReorder(roots, heights, 'p0', 'indent')).toEqual({move: {pageId: 'p0', parentId: 'sibling', siblingIndex: 0}});
+    });
+
+    it('reports a boundary for a page the tree does not hold', () => {
+        const {roots, heights} = treeOf(pages);
+
+        expect(resolveReorder(roots, heights, 'nope', 'up')).toEqual({blocked: 'boundary'});
+    });
+});
diff --git a/webapp/src/components/space_view/page_tree/keyboard.ts b/webapp/src/components/space_view/page_tree/keyboard.ts
new file mode 100644
index 0000000..bd578d5
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/keyboard.ts
@@ -0,0 +1,134 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {PageNode} from 'store/page_tree';
+
+import {MAX_PAGE_DEPTH} from './depth';
+
+// A row as the keyboard sees it: the tree flattened to what's actually on screen,
+// which is the order Up/Down move through.
+export type VisibleRow = {
+    node: PageNode;
+    parentId: string;
+};
+
+export type ReorderIntent = 'up' | 'down' | 'indent' | 'outdent';
+
+export type PageMove = {
+    pageId: string;
+    parentId: string;
+    siblingIndex: number;
+};
+
+/**
+ * Why a reorder couldn't happen. `boundary` means there's nowhere to go in that
+ * direction (already first/last, no preceding sibling to nest under, already at
+ * the root); `depth` means the nest would breach the level cap. They read very
+ * differently to someone listening, so they stay distinct.
+ */
+export type ReorderOutcome =
+    | {move: PageMove; blocked?: undefined}
+    | {move?: undefined; blocked: 'boundary' | 'depth'};
+
+const BOUNDARY: ReorderOutcome = {blocked: 'boundary'};
+
+/**
+ * The visible rows, top to bottom. A collapsed node contributes itself but not
+ * its subtree, so this matches what the user can see and step through.
+ */
+export function flattenVisibleRows(roots: PageNode[], collapsed: Set<string>): VisibleRow[] {
+    const rows: VisibleRow[] = [];
+
+    const walk = (nodes: PageNode[], parentId: string) => {
+        for (const node of nodes) {
+            rows.push({node, parentId});
+            if (!collapsed.has(node.page.id)) {
+                walk(node.children, node.page.id);
+            }
+        }
+    };
+
+    walk(roots, '');
+    return rows;
+}
+
+type Position = {
+    node: PageNode;
+    parentId: string;
+    siblings: PageNode[];
+    index: number;
+};
+
+// Where a page sits in the tree: its parent, its sibling group, and its index in
+// that group. Returns null for an id the tree doesn't hold.
+function findPosition(roots: PageNode[], pageId: string): Position | null {
+    const search = (nodes: PageNode[], parentId: string): Position | null => {
+        const index = nodes.findIndex((node) => node.page.id === pageId);
+        if (index !== -1) {
+            return {node: nodes[index], parentId, siblings: nodes, index};
+        }
+        for (const node of nodes) {
+            const found = search(node.children, node.page.id);
+            if (found) {
+                return found;
+            }
+        }
+        return null;
+    };
+
+    return search(roots, '');
+}
+
+/**
+ * Resolves a keyboard reorder into the move the server expects, or the reason it
+ * can't happen.
+ *
+ * `siblingIndex` is the final 0-based position within the new parent, counted with
+ * the moved page removed — the same contract the drag resolver uses.
+ */
+export function resolveReorder(
+    roots: PageNode[],
+    subtreeHeights: Map<string, number>,
+    pageId: string,
+    intent: ReorderIntent,
+): ReorderOutcome {
+    const position = findPosition(roots, pageId);
+    if (!position) {
+        return BOUNDARY;
+    }
+
+    const {parentId, siblings, index} = position;
+
+    switch (intent) {
+    case 'up':
+        return index === 0 ? BOUNDARY : {move: {pageId, parentId, siblingIndex: index - 1}};
+
+    case 'down':
+        return index === siblings.length - 1 ? BOUNDARY : {move: {pageId, parentId, siblingIndex: index + 1}};
+
+    // Nest under the preceding sibling, as its last child.
+    case 'indent': {
+        if (index === 0) {
+            return BOUNDARY;
+        }
+        const newParent = siblings[index - 1];
+        const deepest = newParent.depth + 1 + (subtreeHeights.get(pageId) ?? 0);
+        if (deepest > MAX_PAGE_DEPTH) {
+            return {blocked: 'depth'};
+        }
+        return {move: {pageId, parentId: newParent.page.id, siblingIndex: newParent.children.length}};
+    }
+
+    // Become the parent's next sibling. Always shallower, so the cap can't bite.
+    case 'outdent': {
+        if (parentId === '') {
+            return BOUNDARY;
+        }
+        const parent = findPosition(roots, parentId);
+        return parent ? {move: {pageId, parentId: parent.parentId, siblingIndex: parent.index + 1}} : BOUNDARY;
+    }
+
+    default:
+        return BOUNDARY;
+    }
+}
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
index 045bd8d..46acfd8 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
@@ -1,8 +1,22 @@
+// The treeitem: it wraps the row and (when expanded) the child group, so focus
+// lands here while the row stays the thing that's painted.
 .node {
     display: flex;
     flex-direction: column;
     gap: 8px;
     min-width: 0;
+    outline: none;
+}
+
+// Focus is on the node, but the ring belongs around the row — the node's box
+// spans the whole subtree.
+.node:focus-visible > .row {
+    outline: 2px solid var(--button-bg);
+    outline-offset: -2px;
+}
+
+.node:focus-visible > .row .menuTrigger {
+    opacity: 1;
 }
 
 // The whole row is the click target, so it owns the only hover/selected state
@@ -29,11 +43,6 @@
         background: rgba(var(--center-channel-color-rgb), 0.08);
     }
 
-    &:focus-visible {
-        outline: 2px solid var(--button-bg);
-        outline-offset: -2px;
-    }
-
     &.active,
     &.active:hover {
         background: rgba(var(--button-bg-rgb), 0.08);
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index 4bc9859..cd60ab5 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -41,14 +41,21 @@ type Props = {
     subtreeHeights: Map<string, number>;
     draggingId: string | null;
     dndEnabled: boolean;
+
+    // The one row in the whole tree that is tabbable (roving tabindex).
+    tabStopId?: string;
     onSelect: (pageId: string) => void;
     onToggle: (pageId: string) => void;
     onSetCollapsed: (ids: string[], collapsed: boolean) => void;
+    onFocusRow: (pageId: string) => void;
+    onRowKeyDown: (event: React.KeyboardEvent, pageId: string) => void;
+    registerRow: (pageId: string, element: HTMLElement | null) => void;
 };
 
-const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeights, draggingId, dndEnabled, onSelect, onToggle, onSetCollapsed}: Props) => {
+const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeights, draggingId, dndEnabled, tabStopId, onSelect, onToggle, onSetCollapsed, onFocusRow, onRowKeyDown, registerRow}: Props) => {
     const {formatMessage} = useIntl();
     const [element, setElement] = useState<HTMLDivElement | null>(null);
+    const [menuOpen, setMenuOpen] = useState(false);
     const [titleOverflowing, titleRef] = useTextOverflow();
 
     // Narrow subscription: only this page's own favorite state re-renders the row.
@@ -107,23 +114,39 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
         onToggle(page.id);
     };
 
-    const onRowKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            onSelect(page.id);
+    // Treeitems nest, so key and focus events from a descendant row bubble through
+    // every ancestor treeitem. Only the row the event actually targeted may act on
+    // it, or one keypress would be handled once per level.
+    const isOwnEvent = (event: React.SyntheticEvent) => event.target === event.currentTarget;
+
+    // Shift+F10 and the Menu key are the platform conventions for "open this
+    // row's context menu"; the trigger button itself stays out of the tab order
+    // so the tree keeps a single tab stop.
+    const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (!isOwnEvent(event)) {
             return;
         }
 
-        if (!hasChildren) {
+        if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {
+            event.preventDefault();
+            setMenuOpen(true);
             return;
         }
+        onRowKeyDown(event, page.id);
+    };
 
-        if ((event.key === 'ArrowRight' && isCollapsed) || (event.key === 'ArrowLeft' && !isCollapsed)) {
-            event.preventDefault();
-            onToggle(page.id);
+    const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {
+        if (isOwnEvent(event)) {
+            onFocusRow(page.id);
         }
     };
 
+    // Two elements, two jobs: the row is the drag/drop target (its box is what the
+    // pointer hit-tests against), while the outer treeitem is what takes focus.
+    const setRowElement = (next: HTMLDivElement | null) => setElement(next);
+
+    const setNodeElement = (next: HTMLDivElement | null) => registerRow(page.id, next);
+
     const PageGlyph = page.type === 'page_folder' ? FolderOutlineIcon : FileTextOutlineIcon;
 
     // Only a clipped title gets a tooltip; a fully visible one would just repeat
@@ -143,12 +166,24 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
     );
 
     return (
+
+        // The treeitem is this outer element, not the visible row, so the child
+        // `role="group"` below is a real descendant of it — the tree pattern needs
+        // that ownership, and an intervening `role="none"` wrapper would flatten
+        // both into siblings in the accessibility tree.
         <div
+            ref={setNodeElement}
             className={styles.node}
-            role='none'
+            role='treeitem'
+            tabIndex={tabStopId === page.id ? 0 : -1}
+            aria-level={depth + 1}
+            aria-selected={isActive}
+            aria-expanded={hasChildren ? !isCollapsed : undefined}
+            onKeyDown={onKeyDown}
+            onFocus={onFocus}
         >
             <div
-                ref={setElement}
+                ref={setRowElement}
                 className={classNames(styles.row, {
                     [styles.active]: isActive,
                     [styles.dragging]: dragging,
@@ -157,13 +192,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                     [styles.invalidZone]: inDraggedSubtree,
                 })}
                 style={{marginInlineStart: depth * INDENT_STEP}}
-                role='treeitem'
-                tabIndex={0}
-                aria-level={depth + 1}
-                aria-selected={isActive}
-                aria-expanded={hasChildren ? !isCollapsed : undefined}
                 onClick={onRowClick}
-                onKeyDown={onRowKeyDown}
             >
                 {hasChildren ? (
                     <button
@@ -204,6 +233,8 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                     pageId={page.id}
                     pageTitle={page.title}
                     align='right'
+                    open={menuOpen}
+                    onOpenChange={setMenuOpen}
                     trigger={(
                         <button
                             type='button'
@@ -234,7 +265,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
             {hasChildren && !isCollapsed && (
                 <div
                     className={styles.children}
-                    role='none'
+                    role='group'
                 >
                     {children.map((child) => (
                         <PageTreeNode
@@ -246,9 +277,13 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                             subtreeHeights={subtreeHeights}
                             draggingId={draggingId}
                             dndEnabled={dndEnabled}
+                            tabStopId={tabStopId}
                             onSelect={onSelect}
                             onToggle={onToggle}
                             onSetCollapsed={onSetCollapsed}
+                            onFocusRow={onFocusRow}
+                            onRowKeyDown={onRowKeyDown}
+                            registerRow={registerRow}
                         />
                     ))}
                 </div>
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
index a94bffd..3b7cce3 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
@@ -16,6 +16,20 @@
     gap: 8px;
 }
 
+// Available to screen readers only: the tree's key bindings and its move
+// announcements have no visual equivalent.
+.visuallyHidden {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
 .separator {
     flex-shrink: 0;
     height: 1px;
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx
new file mode 100644
index 0000000..dfa29b9
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx
@@ -0,0 +1,207 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import React from 'react';
+
+import {makePage, makeSpace} from 'store/test_fixtures';
+
+import {getReadoutMessage} from 'components/readout';
+import {toast} from 'components/toast';
+
+import type {Page} from 'types/docs';
+
+import PageTreePanel from './page_tree_panel';
+
+import {renderWithContext} from '../../../../tests/react_testing_utils';
+
+const mockGoToPage = jest.fn();
+const mockMovePage = jest.fn();
+let mockMoveResult: Promise<void> = Promise.resolve();
+
+jest.mock('hooks/navigation', () => ({
+    useDocsNavigation: () => ({
+        goToPage: mockGoToPage,
+        pageId: undefined,
+        paths: {
+            overview: (spaceId: string) => `/docs/${spaceId}/overview`,
+            page: (spaceId: string, pageId: string) => `/docs/${spaceId}/${pageId}`,
+        },
+    }),
+}));
+
+// movePage is a thunk that resolves or rejects, and the panel reacts to both, so
+// the mock has to be a thunk too rather than a bare action.
+jest.mock('store/actions', () => ({
+    ...jest.requireActual('store/actions'),
+    movePage: (...args: unknown[]) => {
+        mockMovePage(...args as []);
+        return async () => mockMoveResult;
+    },
+}));
+
+// mattermost-redux/actions/preferences is untransformed ESM under jest, so the
+// favorites hooks are mocked at their own boundary (as in space_item_menu.test).
+jest.mock('hooks/favorites', () => ({
+    useIsFavorite: () => false,
+    useToggleFavorite: () => jest.fn(),
+}));
+
+jest.mock('components/toast', () => ({toast: {error: jest.fn()}}));
+
+const SPACE = makeSpace('space1', 'Engineering');
+
+const child = (id: string, parentId: string, sortOrder = 0): Page => ({
+    ...makePage(id, SPACE.id, id, sortOrder),
+    parent_id: parentId,
+});
+
+// a
+//   a1
+//   a2
+// b
+const PAGES: Page[] = [
+    makePage('a', SPACE.id, 'a', 0),
+    child('a1', 'a', 0),
+    child('a2', 'a', 1),
+    makePage('b', SPACE.id, 'b', 1),
+];
+
+const renderPanel = () => renderWithContext(<PageTreePanel space={SPACE}/>, {
+    state: {
+        docs: {
+            spaces: {[SPACE.id]: SPACE},
+            pages: Object.fromEntries(PAGES.map((page) => [page.id, page])),
+            pagesInSpace: {[SPACE.id]: new Set(PAGES.map((page) => page.id))},
+        },
+    },
+});
+
+// A row's accessible name folds in its chevron and menu labels, so rows are found
+// by their title text and walked up to the treeitem.
+const row = (title: string) => screen.getByText(title).closest('[role="treeitem"]') as HTMLElement;
+
+describe('PageTreePanel keyboard support', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        localStorage.clear();
+        mockMoveResult = Promise.resolve();
+    });
+
+    it('exposes a single tab stop for the whole tree', () => {
+        renderPanel();
+
+        const tabbable = screen.getAllByRole('treeitem').filter((item) => item.getAttribute('tabindex') === '0');
+        expect(tabbable).toHaveLength(1);
+        expect(tabbable[0]).toHaveTextContent('a');
+    });
+
+    it('nests child rows in a group so nesting is exposed', () => {
+        renderPanel();
+
+        expect(screen.getAllByRole('group')).toHaveLength(1);
+        expect(row('a')).toHaveAttribute('aria-level', '1');
+        expect(row('a1')).toHaveAttribute('aria-level', '2');
+    });
+
+    it('moves focus down, up, and to the ends of the visible rows', () => {
+        renderPanel();
+
+        row('a').focus();
+
+        fireEvent.keyDown(row('a'), {key: 'ArrowDown'});
+        expect(row('a1')).toHaveFocus();
+
+        fireEvent.keyDown(row('a1'), {key: 'ArrowUp'});
+        expect(row('a')).toHaveFocus();
+
+        fireEvent.keyDown(row('a'), {key: 'End'});
+        expect(row('b')).toHaveFocus();
+
+        fireEvent.keyDown(row('b'), {key: 'Home'});
+        expect(row('a')).toHaveFocus();
+    });
+
+    it('collapses with ArrowLeft and climbs to the parent when there is nothing to close', () => {
+        renderPanel();
+
+        fireEvent.keyDown(row('a1'), {key: 'ArrowLeft'});
+        expect(row('a')).toHaveFocus();
+
+        fireEvent.keyDown(row('a'), {key: 'ArrowLeft'});
+        expect(screen.queryByText('a1')).not.toBeInTheDocument();
+
+        fireEvent.keyDown(row('a'), {key: 'ArrowRight'});
+        expect(screen.getByText('a1')).toBeInTheDocument();
+    });
+
+    it('opens the routed page on Enter', () => {
+        renderPanel();
+
+        fireEvent.keyDown(row('a1'), {key: 'Enter'});
+        expect(mockGoToPage).toHaveBeenCalledWith(SPACE.id, 'a1');
+    });
+
+    it('reorders with Alt+arrow and announces the new position', () => {
+        renderPanel();
+
+        fireEvent.keyDown(row('a2'), {key: 'ArrowUp', altKey: true});
+
+        expect(mockMovePage).toHaveBeenCalledWith(SPACE.id, 'a2', 'a', 0);
+        expect(getReadoutMessage()).toBe('Moved a2 to position 1 under a.');
+    });
+
+    it('nests with Alt+ArrowRight under the preceding sibling', () => {
+        renderPanel();
+
+        fireEvent.keyDown(row('b'), {key: 'ArrowRight', altKey: true});
+
+        expect(mockMovePage).toHaveBeenCalledWith(SPACE.id, 'b', 'a', 2);
+    });
+
+    it('announces a refused move instead of silently doing nothing', () => {
+        renderPanel();
+
+        fireEvent.keyDown(row('a1'), {key: 'ArrowUp', altKey: true});
+
+        expect(mockMovePage).not.toHaveBeenCalled();
+        expect(getReadoutMessage()).toBe('Cannot move a1 any further in that direction.');
+    });
+
+    it('surfaces a failed move instead of letting the row snap back silently', async () => {
+        mockMoveResult = Promise.reject(new Error('boom'));
+        renderPanel();
+
+        fireEvent.keyDown(row('a2'), {key: 'ArrowUp', altKey: true});
+        await waitFor(() => expect(toast.error).toHaveBeenCalled());
+    });
+
+    // Treeitems nest, so a key event on a child bubbles through every ancestor
+    // treeitem; without a target guard one keypress moves several rows.
+    it('handles a key press once, not once per ancestor level', () => {
+        renderPanel();
+
+        fireEvent.keyDown(row('a1'), {key: 'ArrowDown', altKey: true});
+
+        expect(mockMovePage).toHaveBeenCalledTimes(1);
+        expect(mockMovePage).toHaveBeenCalledWith(SPACE.id, 'a1', 'a', 1);
+    });
+
+    it('tracks the focused row itself, not its ancestors', () => {
+        renderPanel();
+
+        fireEvent.focus(row('a1'));
+
+        const tabbable = screen.getAllByRole('treeitem').filter((item) => item.getAttribute('tabindex') === '0');
+        expect(tabbable).toHaveLength(1);
+        expect(tabbable[0]).toBe(row('a1'));
+    });
+
+    it('describes the tree with its keyboard instructions', () => {
+        renderPanel();
+
+        const tree = screen.getByRole('tree');
+        const help = document.getElementById(tree.getAttribute('aria-describedby') ?? '');
+        expect(help).toHaveTextContent(/Hold Alt with an arrow key/);
+    });
+});
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
index 99eb941..b369a39 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
@@ -5,8 +5,8 @@ import {useDocsNavigation} from 'hooks/navigation';
 import {useCollapsedPages} from 'hooks/page_tree';
 import {useCreateRootPage} from 'hooks/pages';
 import {useAppDispatch, useAppSelector} from 'hooks/redux';
-import React, {useCallback, useMemo} from 'react';
-import {FormattedMessage} from 'react-intl';
+import React, {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import PlusIcon from '@mattermost/compass-icons/components/plus';
 
@@ -15,19 +15,31 @@ import {buildDescendantMap, buildPageTree} from 'store/page_tree';
 import {getPagesForSpace} from 'store/selectors';
 
 import {Button} from 'components/form_controls/button';
+import {announce} from 'components/readout';
+import {toast} from 'components/toast';
 
 import type {Space} from 'types/docs';
 
-import {buildSubtreeHeightMap} from './depth';
+import {MAX_PAGE_LEVELS, buildSubtreeHeightMap} from './depth';
 import {usePagesDnd} from './dnd/use_pages_dnd';
+import {flattenVisibleRows, resolveReorder} from './keyboard';
+import type {ReorderIntent} from './keyboard';
 import PageTreeNode from './page_tree_node';
 import styles from './page_tree_panel.module.scss';
 import SpaceHomeItem from './space_home_item';
 
-import {PAGES_SECTION_LABEL_ID} from '../page_header';
+import {PAGES_KEYBOARD_HELP_ID, PAGES_SECTION_LABEL_ID} from '../page_header';
+
+const REORDER_KEYS: Record<string, ReorderIntent> = {
+    ArrowUp: 'up',
+    ArrowDown: 'down',
+    ArrowRight: 'indent',
+    ArrowLeft: 'outdent',
+};
 
 const PageTreePanel = ({space}: {space: Space}) => {
     const dispatch = useAppDispatch();
+    const {formatMessage} = useIntl();
     const {goToPage, pageId} = useDocsNavigation();
     const {collapsed, toggle, setCollapsedFor} = useCollapsedPages();
     const createRootPage = useCreateRootPage(space.id);
@@ -36,13 +48,198 @@ const PageTreePanel = ({space}: {space: Space}) => {
     const roots = useMemo(() => buildPageTree(pages), [pages]);
     const descendants = useMemo(() => buildDescendantMap(roots), [roots]);
     const subtreeHeights = useMemo(() => buildSubtreeHeightMap(roots), [roots]);
+    const visibleRows = useMemo(() => flattenVisibleRows(roots, collapsed), [roots, collapsed]);
+
+    // The tree is a single tab stop (roving tabindex), so it tracks which row owns
+    // it. Focus itself moves imperatively through the registry below rather than
+    // through a prop, so an arrow key re-renders two rows instead of the tree.
+    const [focusedId, setFocusedId] = useState<string | null>(null);
+    const rowElements = useRef(new Map<string, HTMLElement>());
+
+    const registerRow = useCallback((id: string, element: HTMLElement | null) => {
+        if (element) {
+            rowElements.current.set(id, element);
+        } else {
+            rowElements.current.delete(id);
+        }
+    }, []);
+
+    const focusRow = useCallback((id: string) => {
+        setFocusedId(id);
+        rowElements.current.get(id)?.focus();
+    }, []);
+
+    // Whether focus is (or was last) inside the tree. Set on row focus; cleared only
+    // when focus moves to something outside, not when it's simply lost.
+    const treeHasFocus = useRef(false);
+
+    const onFocusRow = useCallback((id: string) => {
+        treeHasFocus.current = true;
+        setFocusedId(id);
+    }, []);
+
+    const onTreeBlur = useCallback((event: React.FocusEvent) => {
+        const next = event.relatedTarget as Node | null;
+        if (next && !event.currentTarget.contains(next)) {
+            treeHasFocus.current = false;
+        }
+    }, []);
 
+    const focusIndex = useRef(-1);
+
+    // Re-parenting a row (nest/unnest, or the revert when the server refuses the
+    // move) remounts it, and deleting a page removes it outright — both drop DOM
+    // focus to the body. Rather than arming a one-shot before each of those, this
+    // holds the invariant: if the tree owned focus and no longer has it, take it
+    // back. It only ever reclaims focus the tree just lost, never steals it.
+    // Layout effect so there's no painted frame without a focus ring.
+    useLayoutEffect(() => {
+        const index = visibleRows.findIndex((row) => row.node.page.id === focusedId);
+        if (index !== -1) {
+            focusIndex.current = index;
+        }
+
+        const active = document.activeElement;
+        const lost = active === null || active === document.body;
+        if (!treeHasFocus.current || !lost || !focusedId || visibleRows.length === 0) {
+            return;
+        }
+
+        // The focused row survived, or it's gone and the row that took its place
+        // (clamped to the end) inherits focus.
+        const target = index === -1 ? visibleRows[Math.min(focusIndex.current, visibleRows.length - 1)] : visibleRows[index];
+        if (!target) {
+            return;
+        }
+
+        const targetId = target.node.page.id;
+        setFocusedId(targetId);
+        rowElements.current.get(targetId)?.focus();
+    }, [visibleRows, focusedId]);
+
+    // Covers both drag-and-drop and the keyboard reorder below. movePage rejects
+    // after restoring server truth, so a silent snap-back gets an explanation.
     const onMove = useCallback(({pageId: movedId, parentId, siblingIndex}: {pageId: string; parentId: string; siblingIndex: number}) => {
-        dispatch(movePage(space.id, movedId, parentId, siblingIndex));
-    }, [dispatch, space.id]);
+        dispatch(movePage(space.id, movedId, parentId, siblingIndex)).catch(() => {
+            toast.error(formatMessage({id: 'docs.pageTree.moveFailed', defaultMessage: 'Could not move the page. Please try again.'}));
+        });
+    }, [dispatch, space.id, formatMessage]);
 
     const {draggingId} = usePagesDnd({pages, onMove, enabled: pages.length > 0});
 
+    // Drag-and-drop can't be the only way to reorder (WCAG 2.1.1), so Alt+arrows
+    // perform the same four moves and announce the outcome.
+    const reorder = useCallback((movedId: string, intent: ReorderIntent) => {
+        const {move, blocked} = resolveReorder(roots, subtreeHeights, movedId, intent);
+        const title = pages.find((page) => page.id === movedId)?.title ?? '';
+
+        if (!move) {
+            announce(blocked === 'depth' ? formatMessage({
+                id: 'docs.pageTree.nestBlocked',
+                defaultMessage: 'Cannot nest {title} deeper than {levels} levels.',
+            }, {title, levels: MAX_PAGE_LEVELS}) : formatMessage({
+                id: 'docs.pageTree.moveBlocked',
+                defaultMessage: 'Cannot move {title} any further in that direction.',
+            }, {title}));
+            return;
+        }
+
+        onMove(move);
+
+        // Announced optimistically, to match the row that has already visibly moved
+        // — waiting for the server would put the announcement behind the change it
+        // describes. A rejected move is corrected by the error toast, which Base UI
+        // renders in its own live region.
+        announce(formatMessage({
+            id: 'docs.pageTree.moved',
+            defaultMessage: 'Moved {title} to position {position} under {parent}.',
+        }, {
+            title,
+            position: move.siblingIndex + 1,
+            parent: pages.find((page) => page.id === move.parentId)?.title ??
+                formatMessage({id: 'docs.pageTree.topLevel', defaultMessage: 'top level'}),
+        }));
+    }, [roots, subtreeHeights, pages, onMove, formatMessage]);
+
+    // One handler for the whole tree: the panel is what knows the visible order,
+    // so a row would only have to hand these decisions back anyway.
+    const onRowKeyDown = useCallback((event: React.KeyboardEvent, rowId: string) => {
+        const index = visibleRows.findIndex((row) => row.node.page.id === rowId);
+        if (index === -1) {
+            return;
+        }
+
+        const {node, parentId} = visibleRows[index];
+        const hasChildren = node.children.length > 0;
+        const isCollapsed = collapsed.has(rowId);
+
+        const reorderIntent = event.altKey ? REORDER_KEYS[event.key] : undefined;
+        if (reorderIntent) {
+            event.preventDefault();
+            reorder(rowId, reorderIntent);
+            return;
+        }
+
+        switch (event.key) {
+        case 'ArrowDown':
+            if (index < visibleRows.length - 1) {
+                focusRow(visibleRows[index + 1].node.page.id);
+            }
+            break;
+        case 'ArrowUp':
+            if (index > 0) {
+                focusRow(visibleRows[index - 1].node.page.id);
+            }
+            break;
+        case 'Home':
+            focusRow(visibleRows[0].node.page.id);
+            break;
+        case 'End':
+            focusRow(visibleRows[visibleRows.length - 1].node.page.id);
+            break;
+
+        // Expand, then step into the subtree — the first child is the next
+        // visible row once this node is open.
+        case 'ArrowRight':
+            if (hasChildren && isCollapsed) {
+                toggle(rowId);
+            } else if (hasChildren) {
+                focusRow(visibleRows[index + 1].node.page.id);
+            }
+            break;
+
+        // Collapse, or climb to the parent when there's nothing to close.
+        case 'ArrowLeft':
+            if (hasChildren && !isCollapsed) {
+                toggle(rowId);
+            } else if (parentId) {
+                focusRow(parentId);
+            }
+            break;
+        case 'Enter':
+        case ' ':
+            goToPage(space.id, rowId);
+            break;
+        default:
+            return;
+        }
+
+        event.preventDefault();
+    }, [visibleRows, collapsed, reorder, focusRow, toggle, goToPage, space.id]);
+
+    // The row that owns the tab stop: wherever focus last was, else the routed
+    // page, else the first row — so Tab always lands somewhere sensible.
+    const tabStopId = useMemo(() => {
+        const isVisible = (id: string | null | undefined) => Boolean(id) && visibleRows.some((row) => row.node.page.id === id);
+        if (focusedId && isVisible(focusedId)) {
+            return focusedId;
+        }
+        if (isVisible(pageId)) {
+            return pageId;
+        }
+        return visibleRows[0]?.node.page.id;
+    }, [focusedId, pageId, visibleRows]);
+
     return (
         <div className={styles.panel}>
             <SpaceHomeItem space={space}/>
@@ -51,6 +248,8 @@ const PageTreePanel = ({space}: {space: Space}) => {
                 className={styles.tree}
                 role='tree'
                 aria-labelledby={PAGES_SECTION_LABEL_ID}
+                aria-describedby={PAGES_KEYBOARD_HELP_ID}
+                onBlur={onTreeBlur}
             >
                 {roots.map((node) => (
                     <PageTreeNode
@@ -62,13 +261,27 @@ const PageTreePanel = ({space}: {space: Space}) => {
                         subtreeHeights={subtreeHeights}
                         draggingId={draggingId}
                         dndEnabled={true}
+                        tabStopId={tabStopId}
                         onSelect={(id) => goToPage(space.id, id)}
                         onToggle={toggle}
                         onSetCollapsed={setCollapsedFor}
+                        onFocusRow={onFocusRow}
+                        onRowKeyDown={onRowKeyDown}
+                        registerRow={registerRow}
                     />
                 ))}
             </div>
 
+            <p
+                id={PAGES_KEYBOARD_HELP_ID}
+                className={styles.visuallyHidden}
+            >
+                <FormattedMessage
+                    id='docs.pageTree.keyboardHelp'
+                    defaultMessage='Use the arrow keys to move through pages. Hold Alt with an arrow key to move the selected page up, down, in, or out.'
+                />
+            </p>
+
             <div
                 className={styles.separator}
                 role='presentation'
diff --git a/webapp/src/components/space_view/space_header.tsx b/webapp/src/components/space_view/space_header.tsx
index 79c5141..0ca5aaf 100644
--- a/webapp/src/components/space_view/space_header.tsx
+++ b/webapp/src/components/space_view/space_header.tsx
@@ -3,6 +3,7 @@
 
 import classNames from 'classnames';
 import {useSpaceFavoriteState, useToggleFavorite} from 'hooks/favorites';
+import {useLeaveSpace} from 'hooks/leave_space';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
 import React, {useCallback} from 'react';
@@ -21,7 +22,7 @@ import ShareVariantOutlineIcon from '@mattermost/compass-icons/components/share-
 import StarIcon from '@mattermost/compass-icons/components/star';
 import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
 
-import {deleteSpace, isLastSpaceMemberError, leaveSpace} from 'store/actions';
+import {deleteSpace} from 'store/actions';
 import {useSpacePermissions} from 'store/permissions';
 
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
@@ -39,7 +40,7 @@ import styles from './space_header.module.scss';
 
 type Props = {
     space: Space;
-    memberCount: number;
+    memberCount?: number;
     infoOpen: boolean;
     onToggleInfo: () => void;
 
@@ -52,6 +53,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
     const dispatch = useAppDispatch();
     const {paths, spaceId, goHome} = useDocsNavigation();
     const {canManageMembers} = useSpacePermissions(space.id);
+    const leaveThisSpace = useLeaveSpace(space);
     const favoriteState = useSpaceFavoriteState(space.id);
     const toggleFavorite = useToggleFavorite();
     const favorited = favoriteState === 'on';
@@ -89,9 +91,6 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
         ));
     }, [space]);
 
-    // Leaving the last authorized member is rejected server-side; keep the user
-    // in the space and surface the reason. Navigate home only when we just left
-    // the space being viewed.
     const openLeaveConfirm = useCallback(() => {
         openDocsModal((modal) => (
             <ConfirmModal
@@ -110,27 +109,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
                 )}
                 isConfirmDestructive={true}
                 onConfirm={async () => {
-                    try {
-                        await dispatch(leaveSpace(space.id));
-                        if (spaceId === space.id) {
-                            goHome();
-                        }
-                    } catch (error) {
-                        const description = isLastSpaceMemberError(error) ? formatMessage({
-                            id: 'docs.leaveSpace.error.lastMember',
-                            defaultMessage: 'A space must keep at least one member with access. Add another member before you leave.',
-                        }) : formatMessage({
-                            id: 'docs.leaveSpace.error.generic',
-                            defaultMessage: 'Something went wrong. Please try again.',
-                        });
-                        toast.error(
-                            formatMessage({
-                                id: 'docs.leaveSpace.error.title',
-                                defaultMessage: 'Unable to leave {name}',
-                            }, {name: space.title}),
-                            {description},
-                        );
-                    }
+                    await leaveThisSpace();
                     modal.close();
                 }}
                 onCancel={modal.close}
@@ -145,7 +124,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
                 />
             </ConfirmModal>
         ));
-    }, [dispatch, space.id, space.title, spaceId, goHome, formatMessage]);
+    }, [space.title, leaveThisSpace]);
 
     const openArchiveConfirm = useCallback(() => {
         openDocsModal((modal) => (
@@ -171,6 +150,21 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
                             goHome();
                         }
                     } catch (error) {
+                        // Without this, a failed archive looks exactly like a
+                        // successful one: the modal just closes.
+                        toast.error(
+                            formatMessage({
+                                id: 'docs.archiveSpace.error.title',
+                                defaultMessage: 'Unable to archive {name}',
+                            }, {name: space.title}),
+                            {
+                                description: formatMessage({
+                                    id: 'docs.archiveSpace.error.generic',
+                                    defaultMessage: 'Something went wrong. Please try again.',
+                                }),
+                            },
+                        );
+
                         // eslint-disable-next-line no-console
                         console.error('Docs: failed to archive space', error);
                     }
@@ -188,7 +182,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
                 />
             </ConfirmModal>
         ));
-    }, [dispatch, space.id, space.title, spaceId, goHome]);
+    }, [dispatch, space.id, space.title, spaceId, goHome, formatMessage]);
 
     // The space title names the trigger, so it carries no aria-label; the menu
     // itself is named by `ariaLabel` on the popup.
@@ -225,6 +219,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
                         <ChevronDownIcon
                             className={styles.chevron}
                             size={16}
+                            aria-hidden={true}
                         />
                     </Button>
                 )}
@@ -299,7 +294,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
                 onClick={onShowMembers}
             >
                 <AccountMultipleOutlineIcon size={16}/>
-                <span>{memberCount}</span>
+                {memberCount !== undefined && <span>{memberCount}</span>}
             </Button>
         </div>
     );
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index f605be0..c67b514 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -8,7 +8,7 @@ import {useSpaceStats} from 'hooks/spaces';
 import React, {useCallback, useState} from 'react';
 import {Redirect} from 'react-router-dom';
 
-import {getPage} from 'store/selectors';
+import {arePagesLoadedForSpace, getPageInSpace} from 'store/selectors';
 
 import SpaceInfoPanel from 'components/space_info/space_info_panel';
 import type {SpaceInfoView} from 'components/space_info/space_info_panel';
@@ -32,8 +32,9 @@ import styles from './space_view.module.scss';
 // (hero) until a page is routed, at which point it shows that page instead.
 // Page bodies are a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
-    const {pageId} = useDocsNavigation();
-    const page = useAppSelector((state) => (pageId ? getPage(state, pageId) : undefined));
+    const {pageId, paths} = useDocsNavigation();
+    const page = useAppSelector((state) => (pageId ? getPageInSpace(state, space.id, pageId) : undefined));
+    const pagesLoaded = useAppSelector((state) => arePagesLoadedForSpace(state, space.id));
     const {pageCount, memberCount} = useSpaceStats(space.id);
     const defaultPagePath = useDefaultPagePath(space);
     const [treeOpen, setTreeOpen] = useState(true);
@@ -50,6 +51,14 @@ const SpaceView = ({space}: {space: Space}) => {
         return <Redirect to={defaultPagePath}/>;
     }
 
+    // Once the space's pages are loaded, a routed id that isn't among them names
+    // a page in another space or one that's gone, so fall back to the front door
+    // rather than rendering a page shell that can never fill in. /overview is
+    // explicit, so it won't bounce back through the default-page redirect above.
+    if (pageId && pagesLoaded && !page) {
+        return <Redirect to={paths.overview(space.id)}/>;
+    }
+
     return (
         <div className={styles.root}>
             <div className={styles.primary}>
@@ -73,7 +82,7 @@ const SpaceView = ({space}: {space: Space}) => {
                     <div className={styles.main}>
                         <div className={styles.scroll}>
                             {pageId ? (
-                                <PageContent pageId={pageId}/>
+                                <PageContent page={page}/>
                             ) : (
                                 <div className={styles.content}>
                                     <PageHero
diff --git a/webapp/src/components/spaces_sidebar/space_item.tsx b/webapp/src/components/spaces_sidebar/space_item.tsx
index 8cb522e..98c6dc9 100644
--- a/webapp/src/components/spaces_sidebar/space_item.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item.tsx
@@ -66,4 +66,7 @@ const SpaceItem = ({space, category, active, dndEnabled, onSelect}: Props) => {
     );
 };
 
-export default SpaceItem;
+// Memoized because the sidebar re-renders on every navigation and nav-tab change,
+// which would otherwise re-run every row (each of which registers a drag listener
+// and reads its own favorite state) for a change affecting one or two of them.
+export default React.memo(SpaceItem);
diff --git a/webapp/src/components/spaces_sidebar/space_item_menu.tsx b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
index b18e96c..44e0502 100644
--- a/webapp/src/components/spaces_sidebar/space_item_menu.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import {useSpaceFavoriteState, useToggleFavorite} from 'hooks/favorites';
+import {useLeaveSpace} from 'hooks/leave_space';
 import {useDocsNavigation} from 'hooks/navigation';
-import {useAppDispatch} from 'hooks/redux';
 import React, {useCallback, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {copyToClipboard} from 'utils/clipboard';
@@ -14,8 +14,6 @@ import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
 import StarIcon from '@mattermost/compass-icons/components/star';
 import StarOutlineIcon from '@mattermost/compass-icons/components/star-outline';
 
-import {leaveSpace} from 'store/actions';
-
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
 import Menu from 'components/menu/menu';
 
@@ -29,8 +27,8 @@ type Props = {
 
 const SpaceItemMenu = ({space}: Props) => {
     const {formatMessage} = useIntl();
-    const dispatch = useAppDispatch();
-    const {paths, spaceId, goHome} = useDocsNavigation();
+    const {paths} = useDocsNavigation();
+    const leaveThisSpace = useLeaveSpace(space);
     const favoriteState = useSpaceFavoriteState(space.id);
     const toggleFavorite = useToggleFavorite();
     const favorited = favoriteState === 'on';
@@ -39,21 +37,10 @@ const SpaceItemMenu = ({space}: Props) => {
 
     const copyLink = () => copyToClipboard(`${window.location.origin}${paths.space(space.id)}`);
 
-    // Leaving removes the current user's membership. Navigate home only if we
-    // just left the space being viewed, and only after the server confirms
-    // (a last-authorized-member removal is rejected with 409).
     const confirmLeave = useCallback(async () => {
-        try {
-            await dispatch(leaveSpace(space.id));
-            if (spaceId === space.id) {
-                goHome();
-            }
-        } catch (error) {
-            // eslint-disable-next-line no-console
-            console.error('Docs: failed to leave space', error);
-        }
+        await leaveThisSpace();
         setConfirmLeaveOpen(false);
-    }, [dispatch, space.id, spaceId, goHome]);
+    }, [leaveThisSpace]);
 
     const menuLabel = formatMessage({id: 'docs.sidebar.space.menu', defaultMessage: 'Space options for {name}'}, {name: space.title});
 
diff --git a/webapp/src/components/spaces_sidebar/use_sidebar_spaces.test.tsx b/webapp/src/components/spaces_sidebar/use_sidebar_spaces.test.tsx
new file mode 100644
index 0000000..3da6d0e
--- /dev/null
+++ b/webapp/src/components/spaces_sidebar/use_sidebar_spaces.test.tsx
@@ -0,0 +1,84 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {renderHook} from '@testing-library/react';
+import {FAVORITES_CATEGORY} from 'data/favorites';
+import React from 'react';
+import {Provider} from 'react-redux';
+
+import {makeSpace} from 'store/test_fixtures';
+
+import {useSidebarSpaces} from './use_sidebar_spaces';
+
+import {makeTestStore} from '../../../tests/react_testing_utils';
+
+const mockSetOrder = jest.fn();
+let mockOrder = {favorites: [] as string[], spaces: [] as string[]};
+
+// mattermost-redux/actions/preferences is untransformed ESM under jest, so the
+// preference-writing hooks are mocked at their own boundary.
+jest.mock('hooks/favorites', () => ({
+    useSidebarOrder: () => ({order: mockOrder, setOrder: mockSetOrder}),
+    useToggleFavorite: () => jest.fn(),
+}));
+
+jest.mock('./dnd/use_spaces_dnd', () => ({useSpacesDnd: () => undefined}));
+
+const TEAM = {id: 'team1', name: 'team-1'};
+const HERE = makeSpace('here', 'In this team', TEAM.id);
+const ELSEWHERE = makeSpace('elsewhere', 'Another team', 'team2');
+
+const favorite = (id: string, type: string) => ({category: FAVORITES_CATEGORY, name: id, value: type});
+
+const render = (favorites: Array<[string, string]>) => {
+    const store = makeTestStore({
+        currentTeam: TEAM,
+        docs: {
+            spaces: {[HERE.id]: HERE, [ELSEWHERE.id]: ELSEWHERE},
+            spacesInTeam: {[TEAM.id]: new Set([HERE.id]), team2: new Set([ELSEWHERE.id])},
+        },
+        preferences: favorites.map(([id, type]) => favorite(id, type)),
+    });
+
+    const wrapper = ({children}: {children: React.ReactNode}) => (
+        <Provider store={store}>{children}</Provider>
+    );
+
+    return renderHook(() => useSidebarSpaces(false), {wrapper}).result;
+};
+
+describe('useSidebarSpaces', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockOrder = {favorites: [], spaces: []};
+    });
+
+    // Favorites are a user preference, so the stored list spans every team. An
+    // out-of-team favorite has no row to render here, so counting it would leave
+    // the Favorites category looking populated while showing nothing.
+    it('scopes favorites to the current team', () => {
+        const {current} = render([['here', 'space'], ['elsewhere', 'space']]);
+
+        expect(current.favoriteSpaceIds).toEqual([HERE.id]);
+    });
+
+    it('leaves a favorited space out of the plain spaces list', () => {
+        const {current} = render([['here', 'space']]);
+
+        expect(current.spacesOrder).toEqual([]);
+    });
+
+    it('lists an unfavorited team space under spaces', () => {
+        const {current} = render([]);
+
+        expect(current.favoriteSpaceIds).toEqual([]);
+        expect(current.spacesOrder).toEqual([HERE.id]);
+    });
+
+    it('ignores a stored order entry for a space that is not loaded', () => {
+        mockOrder = {favorites: [], spaces: ['space:gone', `space:${HERE.id}`]};
+        const {current} = render([]);
+
+        expect(current.spacesOrder).toEqual([HERE.id]);
+    });
+});
diff --git a/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts b/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts
index 0ce9c4a..6977e0f 100644
--- a/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts
+++ b/webapp/src/components/spaces_sidebar/use_sidebar_spaces.ts
@@ -2,20 +2,25 @@
 // See LICENSE.txt for license information.
 
 import {favoriteKey} from 'data/favorites';
-import type {FavoriteType, SidebarOrder} from 'data/favorites';
+import type {SidebarOrder} from 'data/favorites';
 import {useSidebarOrder, useToggleFavorite} from 'hooks/favorites';
 import {useAppSelector} from 'hooks/redux';
 import {useSpaces} from 'hooks/spaces';
 import {useTeamContext} from 'hooks/team';
 import {useCallback, useMemo, useState} from 'react';
 
-import {getDocsFavoriteSpaceIds, getDocsFavoriteTypes} from 'store/favorites';
+import {getDocsFavoriteSpaceIds} from 'store/favorites';
 
 import type {Space} from 'types/docs';
 
 import type {DndCategory} from './dnd/types';
 import {useSpacesDnd} from './dnd/use_spaces_dnd';
 
+// Both stored lists hold prefixed favorite keys ("space:<id>"), never bare ids:
+// moveBetween writes a prefixed key into whichever list receives the move, so a
+// list read back as bare ids would silently lose every reordered entry.
+const SPACE_KEY_PREFIX = favoriteKey({type: 'space', id: ''});
+
 // Applies a move of `key` into `to` at `index`, dropping it from both lists first
 // so a cross-category move can't leave a duplicate behind.
 const moveBetween = (order: SidebarOrder, key: string, to: DndCategory, index: number): SidebarOrder => {
@@ -78,7 +83,7 @@ export function useSidebarSpaces(dndEnabled: boolean): SidebarSpacesModel {
     // out-of-team favorite has no row to render, so counting it would leave the
     // favorites category looking populated while showing nothing.
     const favoriteSpaceIds = useMemo(
-        () => applyStoredOrder(allFavoriteSpaceIds.filter((id) => spacesById.has(id)), order.favorites, 'space:'),
+        () => applyStoredOrder(allFavoriteSpaceIds.filter((id) => spacesById.has(id)), order.favorites, SPACE_KEY_PREFIX),
         [allFavoriteSpaceIds, spacesById, order.favorites, applyStoredOrder],
     );
 
@@ -86,32 +91,21 @@ export function useSidebarSpaces(dndEnabled: boolean): SidebarSpacesModel {
     const spacesOrder = useMemo(() => {
         const shownInFavorites = new Set(favoriteSpaceIds);
         const eligible = spaces.map((s) => s.id).filter((id) => !shownInFavorites.has(id));
-        const eligibleSet = new Set(eligible);
-        const ordered = order.spaces.filter((id) => eligibleSet.has(id));
-        const seen = new Set(ordered);
-        return [...ordered, ...eligible.filter((id) => !seen.has(id))];
-    }, [spaces, favoriteSpaceIds, order.spaces]);
-
-    // Map lookup, not a scan: this runs per drag over a list that can be large.
-    const favoriteTypes = useAppSelector(getDocsFavoriteTypes);
-    const typeOf = useCallback(
-        (id: string): FavoriteType => favoriteTypes.get(id) ?? 'space',
-        [favoriteTypes],
-    );
+        return applyStoredOrder(eligible, order.spaces, SPACE_KEY_PREFIX);
+    }, [spaces, favoriteSpaceIds, order.spaces, applyStoredOrder]);
 
-    // The drag layer works in plain ids (only spaces are draggable), so the id is
-    // mapped back to its stored key here. A cross-category move also flips
+    // The drag layer works in plain ids (only spaces are draggable), so ids are
+    // mapped back to their stored keys here. A cross-category move also flips
     // favorite membership — in core, favoriting *is* a move between categories.
     const applyMove = useCallback((id: string, from: DndCategory, to: DndCategory, index: number) => {
-        // Only spaces are ordered here, so only space keys are persisted.
-        const favoriteKeys = favoriteSpaceIds.map((spaceId) => favoriteKey({type: 'space', id: spaceId}));
-        const stored: SidebarOrder = {favorites: favoriteKeys, spaces: spacesOrder};
-        setOrder(moveBetween(stored, favoriteKey({type: typeOf(id), id}), to, index));
+        const toKeys = (ids: string[]) => ids.map((spaceId) => favoriteKey({type: 'space', id: spaceId}));
+        const stored: SidebarOrder = {favorites: toKeys(favoriteSpaceIds), spaces: toKeys(spacesOrder)};
+        setOrder(moveBetween(stored, favoriteKey({type: 'space', id}), to, index));
 
         if (from !== to) {
-            toggleFavoritePreference(typeOf(id), id);
+            toggleFavoritePreference('space', id);
         }
-    }, [setOrder, favoriteSpaceIds, spacesOrder, typeOf, toggleFavoritePreference]);
+    }, [setOrder, favoriteSpaceIds, spacesOrder, toggleFavoritePreference]);
 
     const toggleFavorite = useCallback((id: string) => toggleFavoritePreference('space', id), [toggleFavoritePreference]);
 
diff --git a/webapp/src/data/api_data_source.ts b/webapp/src/data/api_data_source.ts
index bc47a98..8783ed3 100644
--- a/webapp/src/data/api_data_source.ts
+++ b/webapp/src/data/api_data_source.ts
@@ -7,6 +7,10 @@ import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, Update
 
 import type {DocsDataSource} from './docs_data_source';
 
+// Ids are server-generated and URL-safe today, so this is defense in depth: an id
+// that ever arrives malformed (or user-influenced) can't reshape the request path.
+const seg = encodeURIComponent;
+
 // The server's page list returns summaries (no body/delete_at); fill the fields
 // the store's Page type needs so a summary is a valid, body-less Page.
 const toPage = (summary: Page): Page => ({
@@ -20,17 +24,17 @@ const toPage = (summary: Page): Page => ({
 // Docs data over the plugin REST API (server/api.go). Ids are opaque; lists are
 // paginated ({items, has_more}) and followed to completion by listAll.
 export const apiDataSource: DocsDataSource = {
-    listSpaces: (teamId) => listAll<Space>((query) => `${apiUrl()}/teams/${teamId}/spaces?${query}`),
+    listSpaces: (teamId) => listAll<Space>((query) => `${apiUrl()}/teams/${seg(teamId)}/spaces?${query}`),
 
-    getSpace: (spaceId) => restGet<Space>(`${apiUrl()}/spaces/${spaceId}`),
+    getSpace: (spaceId) => restGet<Space>(`${apiUrl()}/spaces/${seg(spaceId)}`),
 
-    createSpace: (teamId, input: CreateSpaceInput) => restPost<Space>(`${apiUrl()}/teams/${teamId}/spaces`, {
+    createSpace: (teamId, input: CreateSpaceInput) => restPost<Space>(`${apiUrl()}/teams/${seg(teamId)}/spaces`, {
         title: input.title.trim(),
         description: input.description?.trim() || undefined,
         icon: input.icon || undefined,
     }),
 
-    updateSpace: (spaceId, patch: UpdateSpacePatch, expectedUpdateAt) => restPatch<Space>(`${apiUrl()}/spaces/${spaceId}`, {
+    updateSpace: (spaceId, patch: UpdateSpacePatch, expectedUpdateAt) => restPatch<Space>(`${apiUrl()}/spaces/${seg(spaceId)}`, {
         title: patch.title?.trim(),
         description: patch.description?.trim(),
         icon: patch.icon,
@@ -38,19 +42,19 @@ export const apiDataSource: DocsDataSource = {
         expected_update_at: expectedUpdateAt,
     }),
 
-    deleteSpace: (spaceId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}`),
+    deleteSpace: (spaceId) => restDelete<void>(`${apiUrl()}/spaces/${seg(spaceId)}`),
 
-    removeSpaceMember: (spaceId, userId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}/members/${userId}`),
+    removeSpaceMember: (spaceId, userId) => restDelete<void>(`${apiUrl()}/spaces/${seg(spaceId)}/members/${seg(userId)}`),
 
-    listSpaceMembers: (spaceId) => listAll<SpaceMember>((query) => `${apiUrl()}/spaces/${spaceId}/members?${query}`),
+    listSpaceMembers: (spaceId) => listAll<SpaceMember>((query) => `${apiUrl()}/spaces/${seg(spaceId)}/members?${query}`),
 
     listPages: async (spaceId) => {
-        const summaries = await listAll<Page>((query) => `${apiUrl()}/spaces/${spaceId}/pages?${query}`);
+        const summaries = await listAll<Page>((query) => `${apiUrl()}/spaces/${seg(spaceId)}/pages?${query}`);
         return summaries.map(toPage);
     },
 
     movePage: async (spaceId, pageId, parentId, siblingIndex, expectedUpdateAt) => {
-        const moved = await restPatch<Page>(`${apiUrl()}/spaces/${spaceId}/pages/${pageId}/move`, {
+        const moved = await restPatch<Page>(`${apiUrl()}/spaces/${seg(spaceId)}/pages/${seg(pageId)}/move`, {
             parent_id: parentId,
             sibling_index: siblingIndex,
             expected_update_at: expectedUpdateAt,
@@ -59,7 +63,7 @@ export const apiDataSource: DocsDataSource = {
     },
 
     createPage: async (spaceId, input: CreatePageInput) => {
-        const created = await restPost<Page>(`${apiUrl()}/spaces/${spaceId}/pages`, {
+        const created = await restPost<Page>(`${apiUrl()}/spaces/${seg(spaceId)}/pages`, {
             title: input.title.trim(),
             parent_id: input.parentId || undefined,
         });
@@ -67,7 +71,7 @@ export const apiDataSource: DocsDataSource = {
     },
 
     updatePage: async (spaceId, pageId, patch: UpdatePagePatch, baseEditAt) => {
-        const updated = await restPatch<Page>(`${apiUrl()}/spaces/${spaceId}/pages/${pageId}`, {
+        const updated = await restPatch<Page>(`${apiUrl()}/spaces/${seg(spaceId)}/pages/${seg(pageId)}`, {
             title: patch.title?.trim(),
             body: patch.body,
             base_edit_at: baseEditAt,
@@ -75,5 +79,5 @@ export const apiDataSource: DocsDataSource = {
         return toPage(updated);
     },
 
-    deletePage: (spaceId, pageId) => restDelete<void>(`${apiUrl()}/spaces/${spaceId}/pages/${pageId}`),
+    deletePage: (spaceId, pageId) => restDelete<void>(`${apiUrl()}/spaces/${seg(spaceId)}/pages/${seg(pageId)}`),
 };
diff --git a/webapp/src/data/collapsed_pages.ts b/webapp/src/data/collapsed_pages.ts
index 03b58da..e87c2bd 100644
--- a/webapp/src/data/collapsed_pages.ts
+++ b/webapp/src/data/collapsed_pages.ts
@@ -33,10 +33,6 @@ export function getCollapsed(userId: string): Set<string> {
     return new Set(read(userId));
 }
 
-export function isCollapsed(userId: string, pageId: string): boolean {
-    return read(userId).includes(pageId);
-}
-
 export function toggleCollapsed(userId: string, pageId: string): Set<string> {
     const next = getCollapsed(userId);
     if (next.has(pageId)) {
diff --git a/webapp/src/data/favorites.test.ts b/webapp/src/data/favorites.test.ts
index 50208ad..a3fab3c 100644
--- a/webapp/src/data/favorites.test.ts
+++ b/webapp/src/data/favorites.test.ts
@@ -64,6 +64,20 @@ describe('sidebar order', () => {
         expect(parsed.favorites[0]).toBe(many[0]);
     });
 
+    // Trimming takes from the longer list so one huge list can't starve the other
+    // out of the budget entirely.
+    it('trims the longer list when the two are lopsided', () => {
+        const key = (i: number) => `space:${String(i).padStart(26, '0')}`;
+        const many = Array.from({length: 5000}, (_, i) => key(i));
+        const few = [key(9001), key(9002)];
+
+        const parsed = parseSidebarOrder(serializeSidebarOrder({favorites: few, spaces: many}));
+
+        expect(parsed.favorites).toEqual(few);
+        expect(parsed.spaces.length).toBeGreaterThan(0);
+        expect(parsed.spaces.length).toBeLessThan(many.length);
+    });
+
     it('drops non-string entries rather than trusting the payload', () => {
         expect(parseSidebarOrder('{"favorites":["a",5,null],"spaces":"nope"}')).toEqual({
             favorites: ['a'],
diff --git a/webapp/src/hooks/leave_space.test.tsx b/webapp/src/hooks/leave_space.test.tsx
new file mode 100644
index 0000000..a8966b2
--- /dev/null
+++ b/webapp/src/hooks/leave_space.test.tsx
@@ -0,0 +1,106 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {renderHook} from '@testing-library/react';
+import React from 'react';
+import {IntlProvider} from 'react-intl';
+import {Provider} from 'react-redux';
+
+import {ClientError} from '@mattermost/client';
+
+import {makeSpace} from 'store/test_fixtures';
+
+import {toast} from 'components/toast';
+
+import {useLeaveSpace} from './leave_space';
+
+import {makeTestStore} from '../../tests/react_testing_utils';
+
+const mockLeaveSpace = jest.fn();
+const mockGoHome = jest.fn();
+let mockRoutedSpaceId: string | undefined;
+
+jest.mock('store/actions', () => ({
+    ...jest.requireActual('store/actions'),
+    leaveSpace: (spaceId: string) => async () => mockLeaveSpace(spaceId),
+}));
+
+jest.mock('hooks/navigation', () => ({
+    useDocsNavigation: () => ({spaceId: mockRoutedSpaceId, goHome: mockGoHome}),
+}));
+
+jest.mock('components/toast', () => ({toast: {error: jest.fn()}}));
+
+const SPACE = makeSpace('eng', 'Engineering');
+
+const render = () => {
+    const store = makeTestStore();
+    const wrapper = ({children}: {children: React.ReactNode}) => (
+        <Provider store={store}>
+            <IntlProvider
+                locale='en'
+                messages={{}}
+            >
+                {children}
+            </IntlProvider>
+        </Provider>
+    );
+
+    return renderHook(() => useLeaveSpace(SPACE), {wrapper}).result;
+};
+
+const clientError = (status: number) => new ClientError('', {message: 'nope', status_code: status, url: '/x'});
+
+describe('useLeaveSpace', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockRoutedSpaceId = undefined;
+        mockLeaveSpace.mockResolvedValue(undefined);
+    });
+
+    it('leaves the space and stays put when viewing something else', async () => {
+        const {current} = render();
+
+        await current();
+
+        expect(mockLeaveSpace).toHaveBeenCalledWith(SPACE.id);
+        expect(mockGoHome).not.toHaveBeenCalled();
+        expect(toast.error).not.toHaveBeenCalled();
+    });
+
+    it('navigates home when the space just left is the one being viewed', async () => {
+        mockRoutedSpaceId = SPACE.id;
+        const {current} = render();
+
+        await current();
+
+        expect(mockGoHome).toHaveBeenCalled();
+    });
+
+    // The server's 409 means "a space must keep one member", which is actionable;
+    // reporting it as a generic failure would tell the user nothing.
+    it('explains a last-member refusal specifically', async () => {
+        mockLeaveSpace.mockRejectedValue(clientError(409));
+        const {current} = render();
+
+        await current();
+
+        expect(mockGoHome).not.toHaveBeenCalled();
+        expect(toast.error).toHaveBeenCalledWith(
+            'Unable to leave Engineering',
+            {description: expect.stringContaining('at least one member')},
+        );
+    });
+
+    it('falls back to a generic message for any other failure', async () => {
+        mockLeaveSpace.mockRejectedValue(clientError(500));
+        const {current} = render();
+
+        await current();
+
+        expect(toast.error).toHaveBeenCalledWith(
+            'Unable to leave Engineering',
+            {description: 'Something went wrong. Please try again.'},
+        );
+    });
+});
diff --git a/webapp/src/hooks/leave_space.ts b/webapp/src/hooks/leave_space.ts
new file mode 100644
index 0000000..e6e60d2
--- /dev/null
+++ b/webapp/src/hooks/leave_space.ts
@@ -0,0 +1,53 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+
+import {isLastSpaceMemberError, leaveSpace} from 'store/actions';
+
+import {toast} from 'components/toast';
+
+import type {Space} from 'types/docs';
+
+import {useDocsNavigation} from './navigation';
+import {useAppDispatch} from './redux';
+
+/**
+ * Leaves a space, navigating home if the space being viewed is the one left, and
+ * explaining a refusal in place.
+ *
+ * Shared by the space header menu and the sidebar row menu so both surfaces give
+ * the same answer — in particular the server's "a space must keep one member"
+ * rejection, which is otherwise indistinguishable from a generic failure.
+ */
+export function useLeaveSpace(space: Space): () => Promise<void> {
+    const dispatch = useAppDispatch();
+    const {formatMessage} = useIntl();
+    const {spaceId, goHome} = useDocsNavigation();
+
+    return useCallback(async () => {
+        try {
+            await dispatch(leaveSpace(space.id));
+            if (spaceId === space.id) {
+                goHome();
+            }
+        } catch (error) {
+            const description = isLastSpaceMemberError(error) ? formatMessage({
+                id: 'docs.leaveSpace.error.lastMember',
+                defaultMessage: 'A space must keep at least one member with access. Add another member before you leave.',
+            }) : formatMessage({
+                id: 'docs.leaveSpace.error.generic',
+                defaultMessage: 'Something went wrong. Please try again.',
+            });
+
+            toast.error(
+                formatMessage({
+                    id: 'docs.leaveSpace.error.title',
+                    defaultMessage: 'Unable to leave {name}',
+                }, {name: space.title}),
+                {description},
+            );
+        }
+    }, [dispatch, space.id, space.title, spaceId, goHome, formatMessage]);
+}
diff --git a/webapp/src/hooks/page_tree.ts b/webapp/src/hooks/page_tree.ts
index 3cfee15..b7b4e1a 100644
--- a/webapp/src/hooks/page_tree.ts
+++ b/webapp/src/hooks/page_tree.ts
@@ -3,28 +3,63 @@
 
 import {getCollapsed, setCollapsedFor, toggleCollapsed} from 'data/collapsed_pages';
 import {useAppSelector} from 'hooks/redux';
-import {useCallback, useState} from 'react';
+import {useCallback, useSyncExternalStore} from 'react';
 
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
+// Like the sidebar widths (hooks/sidebar_width), the collapsed set lives in a
+// module-level store rather than component state: it's per-user UI state backed by
+// localStorage, and every reader has to see the same live value. Component state
+// would let a second consumer drift out of sync with the tree's own toggles.
+const collapsedByUser = new Map<string, Set<string>>();
+const listeners = new Set<() => void>();
+
+const subscribe = (listener: () => void): (() => void) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+
+const publish = (userId: string, next: Set<string>): void => {
+    collapsedByUser.set(userId, next);
+    listeners.forEach((listener) => listener());
+};
+
+// Idempotent: memoizes the initial localStorage read so getSnapshot stays stable
+// (a fresh Set every call would re-render forever).
+const current = (userId: string): Set<string> => {
+    const known = collapsedByUser.get(userId);
+    if (known) {
+        return known;
+    }
+    const initial = getCollapsed(userId);
+    collapsedByUser.set(userId, initial);
+    return initial;
+};
+
 type CollapsedPages = {
     collapsed: Set<string>;
     toggle: (pageId: string) => void;
     setCollapsedFor: (ids: string[], collapsed: boolean) => void;
 };
 
-// Owns the current user's collapsed-node set for the page tree, backed by
-// localStorage (see data/collapsed_pages). Toggling persists and re-renders.
+/**
+ * The current user's collapsed-node set for the page tree, persisted to
+ * localStorage (see data/collapsed_pages). Toggling persists and re-renders every
+ * consumer.
+ */
 export function useCollapsedPages(): CollapsedPages {
     const userId = useAppSelector(getCurrentUserId);
-    const [collapsed, setCollapsed] = useState<Set<string>>(() => getCollapsed(userId));
+
+    const collapsed = useSyncExternalStore(subscribe, () => current(userId));
 
     const toggle = useCallback((pageId: string) => {
-        setCollapsed(toggleCollapsed(userId, pageId));
+        publish(userId, toggleCollapsed(userId, pageId));
     }, [userId]);
 
     const setMany = useCallback((ids: string[], next: boolean) => {
-        setCollapsed(setCollapsedFor(userId, ids, next));
+        publish(userId, setCollapsedFor(userId, ids, next));
     }, [userId]);
 
     return {collapsed, toggle, setCollapsedFor: setMany};
diff --git a/webapp/src/hooks/pages.test.tsx b/webapp/src/hooks/pages.test.tsx
new file mode 100644
index 0000000..976b526
--- /dev/null
+++ b/webapp/src/hooks/pages.test.tsx
@@ -0,0 +1,91 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {renderHook} from '@testing-library/react';
+import React from 'react';
+import {IntlProvider} from 'react-intl';
+import {Provider} from 'react-redux';
+
+import {makePage, makeSpace} from 'store/test_fixtures';
+
+import {SPACE_PROP_DEFAULT_PAGE_ID} from 'types/docs';
+import type {Page, Space} from 'types/docs';
+
+import {useDefaultPagePath} from './pages';
+
+import {makeTestStore} from '../../tests/react_testing_utils';
+
+let mockRoute: {pageId?: string; isOverview: boolean} = {isOverview: false};
+
+jest.mock('hooks/navigation', () => ({
+    useDocsNavigation: () => ({
+        ...mockRoute,
+        paths: {page: (spaceId: string, pageId: string) => `/docs/${spaceId}/${pageId}`},
+    }),
+}));
+
+const withDefault = (pageId: string): Space => ({
+    ...makeSpace('eng', 'Engineering'),
+    props: {[SPACE_PROP_DEFAULT_PAGE_ID]: pageId},
+});
+
+const render = (space: Space, pages: Page[]) => {
+    const store = makeTestStore({
+        docs: {pages: Object.fromEntries(pages.map((page) => [page.id, page]))},
+    });
+
+    const wrapper = ({children}: {children: React.ReactNode}) => (
+        <Provider store={store}>
+            <IntlProvider
+                locale='en'
+                messages={{}}
+            >
+                {children}
+            </IntlProvider>
+        </Provider>
+    );
+
+    return renderHook(() => useDefaultPagePath(space), {wrapper}).result.current;
+};
+
+describe('useDefaultPagePath', () => {
+    beforeEach(() => {
+        mockRoute = {isOverview: false};
+    });
+
+    it('redirects space home to the default page', () => {
+        const home = makePage('home', 'eng', 'Home');
+
+        expect(render(withDefault('home'), [home])).toBe('/docs/eng/home');
+    });
+
+    it('stays put when a page is already routed', () => {
+        mockRoute = {pageId: 'other', isOverview: false};
+        const home = makePage('home', 'eng', 'Home');
+
+        expect(render(withDefault('home'), [home])).toBeUndefined();
+    });
+
+    // An explicit /overview request has to win, or the front door is unreachable
+    // once a default page is set.
+    it('stays put on an explicit overview request', () => {
+        mockRoute = {isOverview: true};
+        const home = makePage('home', 'eng', 'Home');
+
+        expect(render(withDefault('home'), [home])).toBeUndefined();
+    });
+
+    it('ignores a default page that has not loaded', () => {
+        expect(render(withDefault('home'), [])).toBeUndefined();
+    });
+
+    it('ignores a default page belonging to another space', () => {
+        const stray = makePage('home', 'other-space', 'Home');
+
+        expect(render(withDefault('home'), [stray])).toBeUndefined();
+    });
+
+    it('does nothing when the space has no default page', () => {
+        expect(render(makeSpace('eng', 'Engineering'), [])).toBeUndefined();
+    });
+});
diff --git a/webapp/src/hooks/pages.ts b/webapp/src/hooks/pages.ts
index f1965f3..a154b3c 100644
--- a/webapp/src/hooks/pages.ts
+++ b/webapp/src/hooks/pages.ts
@@ -7,6 +7,8 @@ import {useIntl} from 'react-intl';
 import {createPage} from 'store/actions';
 import {getPage} from 'store/selectors';
 
+import {toast} from 'components/toast';
+
 import {SPACE_PROP_DEFAULT_PAGE_ID} from 'types/docs';
 import type {Space} from 'types/docs';
 
@@ -28,10 +30,13 @@ export function useCreateRootPage(spaceId: string) {
             const page = await dispatch(createPage(spaceId, {title: untitled}));
             goToPage(spaceId, page.id);
         } catch (error) {
+            // Without this the add-page buttons look inert on failure.
+            toast.error(formatMessage({id: 'docs.pageTree.addFailed', defaultMessage: 'Could not create the page. Please try again.'}));
+
             // eslint-disable-next-line no-console
             console.error('Docs: failed to create page', error);
         }
-    }, [dispatch, spaceId, untitled, goToPage]);
+    }, [dispatch, spaceId, untitled, goToPage, formatMessage]);
 }
 
 /**
diff --git a/webapp/src/hooks/spaces.ts b/webapp/src/hooks/spaces.ts
index 6374a9b..5072bfb 100644
--- a/webapp/src/hooks/spaces.ts
+++ b/webapp/src/hooks/spaces.ts
@@ -10,7 +10,7 @@ import {createSpaceFormSchema} from 'validation/space_schema';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import {createSpace, fetchPages, fetchSpaceMembers} from 'store/actions';
-import {getAllSpaces, getPagesForSpace, getSpace, getSpaceMemberIds, getSpacesForCurrentTeam} from 'store/selectors';
+import {areMembersLoadedForSpace, getAllSpaces, getPagesForSpace, getSpace, getSpaceMemberIds, getSpacesForCurrentTeam} from 'store/selectors';
 
 import type {Space, SpaceSummary, SpaceVisibility} from 'types/docs';
 
@@ -45,7 +45,10 @@ export function useRecentSpaceSummaries(): SpaceSummary[] {
 
 export type SpaceStats = {
     pageCount: number;
-    memberCount: number;
+
+    // Undefined until the member list arrives (or if it failed): a real space is
+    // never memberless, so rendering 0 would state something untrue.
+    memberCount?: number;
 };
 
 // Loads and returns a space's page and member counts. Fetches on mount into the
@@ -61,8 +64,9 @@ export function useSpaceStats(spaceId: string): SpaceStats {
 
     const pages = useAppSelector((state) => getPagesForSpace(state, spaceId));
     const memberIds = useAppSelector((state) => getSpaceMemberIds(state, spaceId));
+    const membersLoaded = useAppSelector((state) => areMembersLoadedForSpace(state, spaceId));
 
-    return {pageCount: pages.length, memberCount: memberIds.length};
+    return {pageCount: pages.length, memberCount: membersLoaded ? memberIds.length : undefined};
 }
 
 // Records that the current user viewed a space, feeding the recently-viewed
diff --git a/webapp/src/store/actions.test.ts b/webapp/src/store/actions.test.ts
new file mode 100644
index 0000000..50bd2e4
--- /dev/null
+++ b/webapp/src/store/actions.test.ts
@@ -0,0 +1,108 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import manifest from 'manifest';
+
+import {ClientError} from '@mattermost/client';
+
+import {makePage} from 'store/test_fixtures';
+
+import {isLastSpaceMemberError, leaveSpace, movePage} from './actions';
+
+const mockRemoveSpaceMember = jest.fn();
+const mockMovePage = jest.fn();
+const mockListPages = jest.fn();
+
+jest.mock('data', () => ({
+    docsDataSource: {
+        removeSpaceMember: (...args: unknown[]) => mockRemoveSpaceMember(...args as []),
+        movePage: (...args: unknown[]) => mockMovePage(...args as []),
+        listPages: (...args: unknown[]) => mockListPages(...args as []),
+    },
+}));
+
+jest.mock('mattermost-redux/selectors/entities/users', () => ({getCurrentUserId: () => 'user1'}));
+
+const PAGE = makePage('page1', 'space1', 'Page');
+
+// The reducer isn't under test here; the thunks only need getState + a spy. A
+// dispatched thunk runs inline, so nested dispatches (e.g. movePage's reload) work.
+const run = <T>(thunk: (dispatch: jest.Mock, getState: () => unknown) => T, state: unknown = {}) => {
+    const getState = () => state;
+    const dispatch: jest.Mock = jest.fn((action: unknown) =>
+        (typeof action === 'function' ? (action as (d: jest.Mock, g: () => unknown) => unknown)(dispatch, getState) : action));
+
+    return {result: thunk(dispatch, getState), dispatch};
+};
+
+const stateWithPage = {
+    [`plugins-${manifest.id}`]: {entities: {pages: {[PAGE.id]: PAGE}}},
+};
+
+describe('isLastSpaceMemberError', () => {
+    // The REST layer keeps only {message, status_code}, so 409 is all a caller has
+    // to recognise "a space must keep one member" by.
+    it('recognises the server 409 and nothing else', () => {
+        expect(isLastSpaceMemberError(new ClientError('', {message: 'nope', status_code: 409, url: '/x'}))).toBe(true);
+        expect(isLastSpaceMemberError(new ClientError('', {message: 'nope', status_code: 403, url: '/x'}))).toBe(false);
+        expect(isLastSpaceMemberError(new Error('boom'))).toBe(false);
+        expect(isLastSpaceMemberError(undefined)).toBe(false);
+    });
+});
+
+describe('leaveSpace', () => {
+    beforeEach(() => jest.clearAllMocks());
+
+    it('removes the current user and drops the space from the store', async () => {
+        mockRemoveSpaceMember.mockResolvedValue(undefined);
+
+        const {result, dispatch} = run((d, g) => leaveSpace('space1')(d as never, g as never, undefined as never));
+        await result;
+
+        expect(mockRemoveSpaceMember).toHaveBeenCalledWith('space1', 'user1');
+        expect(dispatch).toHaveBeenCalledWith(expect.objectContaining({spaceId: 'space1'}));
+    });
+
+    it('rejects so the caller can explain the failure', async () => {
+        const error = new ClientError('', {message: 'last member', status_code: 409, url: '/x'});
+        mockRemoveSpaceMember.mockRejectedValue(error);
+
+        const {result} = run((d, g) => leaveSpace('space1')(d as never, g as never, undefined as never));
+
+        await expect(result).rejects.toBe(error);
+    });
+});
+
+describe('movePage', () => {
+    beforeEach(() => jest.clearAllMocks());
+
+    it('reindexes optimistically, then reconciles with the server page', async () => {
+        mockMovePage.mockResolvedValue({...PAGE, parent_id: 'parent1'});
+
+        const {result, dispatch} = run((d, g) => movePage('space1', PAGE.id, 'parent1', 0)(d as never, g as never, undefined as never), stateWithPage);
+        await result;
+
+        expect(dispatch.mock.calls[0][0]).toEqual(expect.objectContaining({pageId: PAGE.id, parentId: 'parent1', siblingIndex: 0}));
+        expect(mockMovePage).toHaveBeenCalledWith('space1', PAGE.id, 'parent1', 0, PAGE.update_at);
+    });
+
+    // The optimistic reindex is wrong once the server refuses, so the list is
+    // reloaded and the failure still reaches the caller to surface.
+    it('restores server truth and rejects when the move fails', async () => {
+        const error = new Error('boom');
+        mockMovePage.mockRejectedValue(error);
+        mockListPages.mockResolvedValue([PAGE]);
+
+        const {result} = run((d, g) => movePage('space1', PAGE.id, 'parent1', 0)(d as never, g as never, undefined as never), stateWithPage);
+
+        await expect(result).rejects.toBe(error);
+        expect(mockListPages).toHaveBeenCalledWith('space1');
+    });
+
+    it('does nothing for a page that is not loaded', async () => {
+        const {result} = run((d, g) => movePage('space1', 'ghost', '', 0)(d as never, g as never, undefined as never), stateWithPage);
+        await result;
+
+        expect(mockMovePage).not.toHaveBeenCalled();
+    });
+});
diff --git a/webapp/src/store/actions.ts b/webapp/src/store/actions.ts
index 2aa61bf..4f48ba5 100644
--- a/webapp/src/store/actions.ts
+++ b/webapp/src/store/actions.ts
@@ -58,8 +58,7 @@ export function fetchAllSpaces(): DocsThunkAction<Promise<void>> {
 export function fetchPages(spaceId: string): DocsThunkAction<Promise<void>> {
     return async (dispatch) => {
         try {
-            const pages = await docsDataSource.listPages(spaceId);
-            dispatch({type: PageTypes.RECEIVED_PAGES, pages});
+            await dispatch(loadPages(spaceId));
         } catch (error) {
             // eslint-disable-next-line no-console
             console.error('Docs: failed to load pages', error);
@@ -67,6 +66,15 @@ export function fetchPages(spaceId: string): DocsThunkAction<Promise<void>> {
     };
 }
 
+// Same load, but rejecting — for callers that have to react to a failure rather
+// than tolerate a stale list.
+export function loadPages(spaceId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch) => {
+        const pages = await docsDataSource.listPages(spaceId);
+        dispatch({type: PageTypes.RECEIVED_PAGES, pages, spaceId});
+    };
+}
+
 // Reparents/reorders a page. Optimistically reindexes the store, then reconciles
 // with the server-returned page. On failure it re-fetches the space's pages to
 // restore server truth. siblingIndex is 0-based within the new parent;
@@ -87,7 +95,11 @@ export function movePage(spaceId: string, pageId: string, parentId: string, sibl
         } catch (error) {
             // eslint-disable-next-line no-console
             console.error('Docs: failed to move page', error);
-            dispatch(fetchPages(spaceId));
+
+            // The optimistic reindex is now wrong, so pull server truth back in
+            // before rejecting — the caller surfaces the failure to the user.
+            await dispatch(fetchPages(spaceId));
+            throw error;
         }
     };
 }
diff --git a/webapp/src/store/entities.ts b/webapp/src/store/entities.ts
index 0f92889..8fcef5c 100644
--- a/webapp/src/store/entities.ts
+++ b/webapp/src/store/entities.ts
@@ -13,7 +13,7 @@ import {PageTypes, SpaceTypes} from './action_types';
 type ReceivedSpacesAction = {spaces: Space[]; teamId?: string};
 type CreatedSpaceAction = {space: Space};
 type DeletedSpaceAction = {spaceId: string};
-type ReceivedPagesAction = {pages: Page[]};
+type ReceivedPagesAction = {pages: Page[]; spaceId?: string};
 type MovedPageAction = {pageId: string; spaceId: string; parentId: string; siblingIndex: number};
 
 // `pageIds` is the deleted page plus its descendants: the byId map and the
@@ -214,11 +214,17 @@ function pages(state: Record<string, Page> = {}, action: UnknownAction): Record<
 function pagesInSpace(state: Record<string, Set<string>> = {}, action: UnknownAction): Record<string, Set<string>> {
     switch (action.type) {
     case PageTypes.RECEIVED_PAGES: {
-        const {pages: received} = action as unknown as ReceivedPagesAction;
-        if (received.length === 0) {
+        const {pages: received, spaceId} = action as unknown as ReceivedPagesAction;
+        if (received.length === 0 && (spaceId === undefined || spaceId in state)) {
             return state;
         }
         const next = {...state};
+
+        // A listed space always gets an entry, so its presence means "this
+        // space's pages are loaded" even when the space has none.
+        if (spaceId !== undefined && !(spaceId in next)) {
+            next[spaceId] = new Set();
+        }
         for (const page of received) {
             const set = new Set(next[page.space_id]);
             set.add(page.id);
diff --git a/webapp/src/store/favorites.test.ts b/webapp/src/store/favorites.test.ts
new file mode 100644
index 0000000..4faaacb
--- /dev/null
+++ b/webapp/src/store/favorites.test.ts
@@ -0,0 +1,93 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {FAVORITES_CATEGORY} from 'data/favorites';
+
+import {makePage, makeSpace} from 'store/test_fixtures';
+
+import type {Page} from 'types/docs';
+
+import {
+    getDocsFavoriteIds,
+    getDocsFavoritePagesBySpace,
+    getDocsFavoriteSpaceIds,
+    getDocsFavorites,
+    getSpaceFavoriteState,
+} from './favorites';
+
+import {makeTestState} from '../../tests/react_testing_utils';
+
+const ENG = makeSpace('eng', 'Engineering');
+const OPS = makeSpace('ops', 'Operations');
+
+const pageIn = (id: string, spaceId: string): Page => makePage(id, spaceId, id);
+
+const PAGES = [pageIn('engPage', ENG.id), pageIn('opsPage', OPS.id)];
+
+// Favorites are user preferences: the preference *name* is the favorited id and
+// its *value* is the kind of thing it points at (see data/favorites parseFavorite).
+const favorite = (id: string, type: string) => ({category: FAVORITES_CATEGORY, name: id, value: type});
+
+const stateWith = (favorites: Array<[string, string]>) => makeTestState({
+    docs: {
+        spaces: {[ENG.id]: ENG, [OPS.id]: OPS},
+        pages: Object.fromEntries(PAGES.map((page) => [page.id, page])),
+    },
+    preferences: favorites.map(([id, type]) => favorite(id, type)),
+});
+
+describe('getDocsFavorites', () => {
+    it('parses stored favorites and skips unknown types', () => {
+        const state = stateWith([['eng', 'space'], ['engPage', 'page'], ['xyz', 'wat']]);
+
+        expect(getDocsFavorites(state)).toEqual([
+            {type: 'space', id: 'eng'},
+            {type: 'page', id: 'engPage'},
+        ]);
+        expect(getDocsFavoriteIds(state)).toEqual(new Set(['eng', 'engPage']));
+    });
+});
+
+describe('getDocsFavoritePagesBySpace', () => {
+    it('groups favorited pages under the space that owns them', () => {
+        const state = stateWith([['engPage', 'page'], ['opsPage', 'page']]);
+
+        expect(getDocsFavoritePagesBySpace(state)).toEqual(new Map([
+            [ENG.id, ['engPage']],
+            [OPS.id, ['opsPage']],
+        ]));
+    });
+
+    it('omits a favorited page whose space has not loaded', () => {
+        const state = makeTestState({preferences: [favorite('engPage', 'page')]});
+
+        expect(getDocsFavoritePagesBySpace(state).size).toBe(0);
+    });
+});
+
+describe('getSpaceFavoriteState', () => {
+    it('is on when the space itself is favorited', () => {
+        expect(getSpaceFavoriteState(stateWith([['eng', 'space']]), ENG.id)).toBe('on');
+    });
+
+    // Nested-checkbox semantics: the space isn't favorited, but something inside it is.
+    it('is partial when only a page inside it is favorited', () => {
+        expect(getSpaceFavoriteState(stateWith([['engPage', 'page']]), ENG.id)).toBe('partial');
+    });
+
+    it('is on, not partial, when both the space and one of its pages are favorited', () => {
+        expect(getSpaceFavoriteState(stateWith([['eng', 'space'], ['engPage', 'page']]), ENG.id)).toBe('on');
+    });
+
+    it('is off when neither the space nor its pages are favorited', () => {
+        expect(getSpaceFavoriteState(stateWith([['ops', 'space']]), ENG.id)).toBe('off');
+    });
+});
+
+describe('getDocsFavoriteSpaceIds', () => {
+    it('includes spaces that only hold a favorited page, without duplicating', () => {
+        const state = stateWith([['eng', 'space'], ['engPage', 'page'], ['opsPage', 'page']]);
+
+        expect(getDocsFavoriteSpaceIds(state)).toEqual([ENG.id, OPS.id]);
+    });
+});
diff --git a/webapp/src/store/selectors.ts b/webapp/src/store/selectors.ts
index 75bf055..4d6f755 100644
--- a/webapp/src/store/selectors.ts
+++ b/webapp/src/store/selectors.ts
@@ -107,6 +107,26 @@ export const getPagesForSpace = createSelector(
 
 export const getPage = (state: GlobalState, id: string): Page | undefined => getPagesById(state)[id];
 
+// A page only if it belongs to `spaceId`. Page ids are globally unique, so a
+// URL can name a real page that lives in another space (or one that has since
+// moved); resolving by id alone would render it inside the wrong space.
+export const getPageInSpace = (state: GlobalState, spaceId: string, id: string): Page | undefined => {
+    const page = getPagesById(state)[id];
+    return page?.space_id === spaceId ? page : undefined;
+};
+
+// Whether a space's member list has been loaded. A space always has at least its
+// creator, so a count of 0 means "not loaded (or the request failed)" rather than
+// "no members" — consumers need to tell those apart before rendering a number.
+export const areMembersLoadedForSpace = (state: GlobalState, spaceId: string): boolean =>
+    spaceId in entities(state).spaceMembers;
+
+// Whether a space's page list has been loaded (fetchPages seeds the index entry
+// even for a space with no pages). Lets consumers tell a page id that is simply
+// still in flight from one that doesn't belong here.
+export const arePagesLoadedForSpace = (state: GlobalState, spaceId: string): boolean =>
+    spaceId in getPagesInSpaceIndex(state);
+
 export type DocsSearchResults = {
     spaces: Space[];
     pages: Page[];
diff --git a/webapp/tests/react_testing_utils.tsx b/webapp/tests/react_testing_utils.tsx
index 4d517c1..192c9f8 100644
--- a/webapp/tests/react_testing_utils.tsx
+++ b/webapp/tests/react_testing_utils.tsx
@@ -36,12 +36,15 @@ export type TestStateOptions = {
     // the current team.
     teams?: TestTeam[];
     currentUser?: TestUser;
+
+    // Host user preferences, which is where Docs favorites and sidebar order live.
+    preferences?: Array<{category: string; name: string; value: string}>;
 };
 
 // Builds a host-shaped GlobalState with the Docs plugin subtree under
 // `plugins-<id>` (where the plugin's registered reducer mounts) plus the minimal
 // entities the Docs hooks read (current team + membership + current user).
-export function makeTestState({docs, currentTeam, teams, currentUser}: TestStateOptions = {}): GlobalState {
+export function makeTestState({docs, currentTeam, teams, currentUser, preferences}: TestStateOptions = {}): GlobalState {
     const teamId = currentTeam?.id ?? '';
     const userId = currentUser?.id ?? '';
     const allTeams = teams ?? (currentTeam ? [currentTeam] : []);
@@ -60,6 +63,14 @@ export function makeTestState({docs, currentTeam, teams, currentUser}: TestState
                 currentUserId: userId,
                 profiles: currentUser ? {[userId]: currentUser} : {},
             },
+
+            // Keyed `category--name`, as mattermost-redux's preference selectors expect.
+            preferences: {
+                myPreferences: Object.fromEntries((preferences ?? []).map((preference) => [
+                    `${preference.category}--${preference.name}`,
+                    {user_id: userId, ...preference},
+                ])),
+            },
         },
     } as unknown as GlobalState;
 }

From a74dc4a770189adc4652ca01298af1edebf4a81c Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 08:56:45 -0500
Subject: [PATCH 26/68] feat(docs): let REST calls carry an abort signal

FetchOptions takes an optional AbortSignal, threaded through the rest helpers
and listAll so an in-flight paginated load can be cancelled instead of running
to the last page after the caller has moved on. Client4.getOptions already
passes signal through to fetch, so no host-side wiring is needed.

Aborts reject with fetch's AbortError rather than ClientError, keeping
"I cancelled this" distinguishable from a server rejection.

Prompt: FetchOptions should support an abort signal.
---
 webapp/src/client/rest.ts | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/webapp/src/client/rest.ts b/webapp/src/client/rest.ts
index cc68f65..2b15691 100644
--- a/webapp/src/client/rest.ts
+++ b/webapp/src/client/rest.ts
@@ -17,13 +17,16 @@ type FetchOptions = {
     method: string;
     body?: string;
     headers?: Record<string, string>;
+    signal?: AbortSignal;
 };
 
 // Single fetch idiom shared by every Docs API call. Client4.getOptions injects
 // the session credentials and CSRF header the server expects (it reads the
 // platform-supplied Mattermost-User-Id header), so this never hand-rolls auth.
 // Server errors are JSON `AppError`s ({message, status_code}); non-OK responses
-// are normalized into ClientError from @mattermost/client.
+// are normalized into ClientError from @mattermost/client. An aborted request
+// rejects with fetch's own `AbortError` DOMException instead, so callers can tell
+// "I cancelled this" apart from "the server said no".
 async function doFetch<T>(url: string, options: FetchOptions): Promise<T> {
     const response = await fetch(url, Client4.getOptions(options));
 
@@ -44,15 +47,17 @@ async function doFetch<T>(url: string, options: FetchOptions): Promise<T> {
     throw new ClientError(Client4.url, {message, status_code: response.status, url});
 }
 
-export const restGet = <T>(url: string): Promise<T> => doFetch<T>(url, {method: 'GET'});
+export const restGet = <T>(url: string, signal?: AbortSignal): Promise<T> =>
+    doFetch<T>(url, {method: 'GET', signal});
 
-export const restPost = <T>(url: string, body: unknown): Promise<T> =>
-    doFetch<T>(url, {method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}});
+export const restPost = <T>(url: string, body: unknown, signal?: AbortSignal): Promise<T> =>
+    doFetch<T>(url, {method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}, signal});
 
-export const restPatch = <T>(url: string, body: unknown): Promise<T> =>
-    doFetch<T>(url, {method: 'PATCH', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}});
+export const restPatch = <T>(url: string, body: unknown, signal?: AbortSignal): Promise<T> =>
+    doFetch<T>(url, {method: 'PATCH', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}, signal});
 
-export const restDelete = <T>(url: string): Promise<T> => doFetch<T>(url, {method: 'DELETE'});
+export const restDelete = <T>(url: string, signal?: AbortSignal): Promise<T> =>
+    doFetch<T>(url, {method: 'DELETE', signal});
 
 type Paginated<T> = {
     items: T[];
@@ -67,11 +72,11 @@ const MAX_PAGES = 1000;
 // Follows the server's {items, page, per_page, has_more} envelope across pages
 // and returns the flattened list. The page cap is a runaway-loop backstop, not
 // an expected limit.
-export async function listAll<T>(path: (query: string) => string): Promise<T[]> {
+export async function listAll<T>(path: (query: string) => string, signal?: AbortSignal): Promise<T[]> {
     const out: T[] = [];
     for (let page = 0; page < MAX_PAGES; page++) {
         // eslint-disable-next-line no-await-in-loop
-        const res = await restGet<Paginated<T>>(path(`page=${page}&per_page=${PER_PAGE}`));
+        const res = await restGet<Paginated<T>>(path(`page=${page}&per_page=${PER_PAGE}`), signal);
         out.push(...res.items);
         if (!res.has_more) {
             break;

From a52705e4c209e32d40eda00d9e20ae5d518774f2 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 10:36:49 -0500
Subject: [PATCH 27/68] feat(docs): adapt the webapp shell for the page editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pre-resolves the parts of the PR #13 (MM-69893) merge that are worth keeping
whichever order the two PRs land in, so the editor branch can be merged, reverted
and re-merged without redoing them.

- webapp_globals: adopt the document-mode editor contract — contentType,
  extensions, onContentError, plus getEditor/hasContentError on the handle and a
  hostSupportsDocumentEditor probe. A Docs page body is structured content, so
  the editor is useless to us in markdown mode. Also onChange's param rename and
  ReactNodeArray -> ReactNode[], which drops a deprecation warning.
- rest: thrown errors become RestError, a ClientError subclass that keeps the
  parsed payload and the server error id. Draft publish answers a 409 with the
  current page in the body, which ClientError alone discards. Existing
  instanceof ClientError / status_code callers are unaffected.
- rest: add a path-relative doFetch over the same request path, for client
  modules that describe a whole endpoint family.
- types: drop the stale note on Page — user_id and last_modified_by are here.

The editor branch's client layer compiles against this without edits, so it no
longer needs its own transport (which hand-rolled headers and relied on the
deprecated XMLHttpRequest CSRF fallback).

Prompt: merge PR#13 for preview with a revert-marked commit; conflict resolution
in a separate commit that stays, to reduce conflicts when both PRs merge
---
 webapp/src/client/rest.ts    | 62 +++++++++++++++++++++++++++++++-----
 webapp/src/types/docs.ts     |  5 ++-
 webapp/src/webapp_globals.ts | 30 +++++++++++++++--
 3 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/webapp/src/client/rest.ts b/webapp/src/client/rest.ts
index 2b15691..a35fa55 100644
--- a/webapp/src/client/rest.ts
+++ b/webapp/src/client/rest.ts
@@ -13,6 +13,10 @@ import {Client4} from 'mattermost-redux/client';
 // Client4.url after our bundle loads.
 const apiUrl = (): string => `${Client4.url}/plugins/${manifest.id}/api/v1`;
 
+// The host site URL, for the platform's own endpoints (avatars, files) that are
+// not under our plugin's API root.
+export const siteRoot = (): string => Client4.url;
+
 type FetchOptions = {
     method: string;
     body?: string;
@@ -20,14 +24,33 @@ type FetchOptions = {
     signal?: AbortSignal;
 };
 
+/**
+ * A failed Docs API call. Extends ClientError so existing callers keep matching
+ * on `instanceof ClientError` and `status_code`, and adds the two things an
+ * AppError body carries that ClientError drops: the raw parsed payload, and a
+ * plain `status`. The payload matters for endpoints that answer an error with
+ * data — draft publish returns the current page alongside its 409.
+ */
+export class RestError extends ClientError {
+    status: number;
+    body: unknown;
+
+    constructor(url: string, status: number, message: string, body: unknown, serverErrorId?: string) {
+        super(Client4.url, {message, status_code: status, url, server_error_id: serverErrorId});
+        this.name = 'RestError';
+        this.status = status;
+        this.body = body;
+    }
+}
+
 // Single fetch idiom shared by every Docs API call. Client4.getOptions injects
 // the session credentials and CSRF header the server expects (it reads the
 // platform-supplied Mattermost-User-Id header), so this never hand-rolls auth.
 // Server errors are JSON `AppError`s ({message, status_code}); non-OK responses
-// are normalized into ClientError from @mattermost/client. An aborted request
+// are normalized into RestError. An aborted request
 // rejects with fetch's own `AbortError` DOMException instead, so callers can tell
 // "I cancelled this" apart from "the server said no".
-async function doFetch<T>(url: string, options: FetchOptions): Promise<T> {
+async function request<T>(url: string, options: FetchOptions): Promise<T> {
     const response = await fetch(url, Client4.getOptions(options));
 
     if (response.ok) {
@@ -38,26 +61,49 @@ async function doFetch<T>(url: string, options: FetchOptions): Promise<T> {
     }
 
     let message = `Received status code ${response.status}`;
+    let body: unknown;
+    let serverErrorId: string | undefined;
     try {
-        const data = await response.json();
+        body = await response.json();
+        const data = body as {message?: string; id?: string};
         message = data.message || message;
+        serverErrorId = data.id;
     } catch {
         // Non-JSON error body — keep the status-based message.
     }
-    throw new ClientError(Client4.url, {message, status_code: response.status, url});
+    throw new RestError(url, response.status, message, body, serverErrorId);
 }
 
 export const restGet = <T>(url: string, signal?: AbortSignal): Promise<T> =>
-    doFetch<T>(url, {method: 'GET', signal});
+    request<T>(url, {method: 'GET', signal});
 
 export const restPost = <T>(url: string, body: unknown, signal?: AbortSignal): Promise<T> =>
-    doFetch<T>(url, {method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}, signal});
+    request<T>(url, {method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}, signal});
 
 export const restPatch = <T>(url: string, body: unknown, signal?: AbortSignal): Promise<T> =>
-    doFetch<T>(url, {method: 'PATCH', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}, signal});
+    request<T>(url, {method: 'PATCH', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}, signal});
 
 export const restDelete = <T>(url: string, signal?: AbortSignal): Promise<T> =>
-    doFetch<T>(url, {method: 'DELETE', signal});
+    request<T>(url, {method: 'DELETE', signal});
+
+type DoFetchOptions = {
+    method?: string;
+    body?: unknown;
+    signal?: AbortSignal;
+};
+
+/**
+ * Path-relative form of the request helpers: `path` is resolved against the
+ * plugin's API root and `body` is serialized here. Client modules that describe a
+ * whole endpoint family (see `client/drafts.ts`) read better this way than
+ * building an absolute URL per call.
+ */
+export const doFetch = <T>(path: string, {method = 'GET', body, signal}: DoFetchOptions = {}): Promise<T> =>
+    request<T>(`${apiUrl()}${path}`, {
+        method,
+        signal,
+        ...(body === undefined ? {} : {body: JSON.stringify(body), headers: {'Content-Type': 'application/json'}}),
+    });
 
 type Paginated<T> = {
     items: T[];
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index c329b50..80d5288 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -58,9 +58,8 @@ export type UpdateSpacePatch = {
 // front door (hero).
 export const SPACE_PROP_DEFAULT_PAGE_ID = 'default_page_id';
 
-// Mirrors the server model (server/model/page.go). search_text, user_id,
-// last_modified_by, original_id, and props exist on the server model too; add
-// them as the API/editor lands.
+// Mirrors the server model (server/model/page.go). search_text, original_id, and
+// props exist on the server model too; add them as the editor lands.
 export type Page = {
     id: string;
     space_id: string;
diff --git a/webapp/src/webapp_globals.ts b/webapp/src/webapp_globals.ts
index 9a8d8e8..4e140df 100644
--- a/webapp/src/webapp_globals.ts
+++ b/webapp/src/webapp_globals.ts
@@ -3,7 +3,7 @@
 
 import type {History} from 'history';
 import React from 'react';
-import type {ComponentType, ElementType, ForwardRefExoticComponent, KeyboardEvent, KeyboardEventHandler, ReactElement, ReactNode, ReactNodeArray, RefAttributes, RefObject} from 'react';
+import type {ComponentType, ElementType, ForwardRefExoticComponent, KeyboardEvent, KeyboardEventHandler, ReactElement, ReactNode, RefAttributes, RefObject} from 'react';
 import type {MessageDescriptor} from 'react-intl';
 import type {Action} from 'redux';
 
@@ -77,7 +77,7 @@ export type SuggestionResults<Item = unknown> =
 
 export type WysiwygEditorProps = {
     value: string;
-    onChange: (markdown: string) => void;
+    onChange: (content: string) => void;
     onSubmit: () => void;
     onFocus?: () => void;
     onBlur?: () => void;
@@ -89,6 +89,18 @@ export type WysiwygEditorProps = {
     useCtrlSend?: boolean;
     sendCodeBlockOnCtrlEnter?: boolean;
     onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+
+    // Document mode: 'json' hands the editor structured TipTap content instead of
+    // markdown, which is what a Docs page body is.
+    contentType?: 'markdown' | 'json';
+
+    // TipTap extensions to register on top of the host's own set. Left as
+    // `unknown[]` so consumers don't take a TipTap dependency.
+    extensions?: unknown[];
+
+    // Raised when stored content can't be parsed, so a caller can refuse to edit
+    // rather than overwrite the stored version with a fallback document.
+    onContentError?: (error: Error) => void;
 };
 
 export type SuggestionListProps = {
@@ -116,7 +128,7 @@ export type FormattingBarProps = {
     applyFormatting: (mode: PublishedMarkdownMode) => void;
     disableControls: boolean;
     location: string;
-    additionalControls?: ReactNodeArray;
+    additionalControls?: ReactNode[];
     aiActionsMenu?: ReactNode;
 
     // Returns a Tiptap Editor. Left as `unknown` so consumers don't have to
@@ -129,6 +141,12 @@ export type PublishedWysiwygEditorHandle = {
     focus: () => void;
     blur: () => void;
     getInputBox: () => HTMLElement | null;
+
+    // The underlying TipTap editor, for callers that drive it directly. Absent on
+    // hosts that predate document mode — see hostSupportsDocumentEditor.
+    getEditor?: () => unknown;
+
+    hasContentError?: () => boolean;
 };
 
 export type PublishedFormattingBarHandle = {
@@ -263,6 +281,12 @@ export function hostCanUseEditor(): boolean {
     return Boolean(webappUtils().editor?.WysiwygEditor);
 }
 
+// Document-mode support is detected from the handle rather than the module: a host
+// can publish the editor without publishing structured-content access.
+export function hostSupportsDocumentEditor(handle: PublishedWysiwygEditorHandle | null | undefined): boolean {
+    return typeof handle?.getEditor === 'function';
+}
+
 // The published editor components + suggestion provider constructors, or
 // undefined when the host doesn't expose them. Fields are individually optional
 // so a newer host can add pieces without breaking older plugin bundles.

From 6b65482a6da94810b818c5defc4ebca55e98bbf0 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 19:47:04 -0500
Subject: [PATCH 28/68] feat(docs): address page edit mode with ?edit=1

Adds editPagePath plus isEditing/goToEditPage on useDocsNavigation. isEditing
requires a routed page, so the query is ignored on space and overview URLs where
there is nothing to edit.

Prompt: add an edit mode distinct from view mode, then make the page title
inline-editable
---
 webapp/src/hooks/navigation.test.tsx | 52 ++++++++++++++++++++++++++--
 webapp/src/hooks/navigation.ts       | 13 +++++--
 webapp/src/routing/paths.test.ts     | 14 ++++++++
 webapp/src/routing/paths.ts          |  8 +++++
 4 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 webapp/src/routing/paths.test.ts

diff --git a/webapp/src/hooks/navigation.test.tsx b/webapp/src/hooks/navigation.test.tsx
index 07270ad..fad887a 100644
--- a/webapp/src/hooks/navigation.test.tsx
+++ b/webapp/src/hooks/navigation.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {screen} from '@testing-library/react';
+import {fireEvent, screen} from '@testing-library/react';
 import React from 'react';
 
 import {useDocsNavigation} from './navigation';
@@ -9,13 +9,20 @@ import {useDocsNavigation} from './navigation';
 import {renderWithContext} from '../../tests/react_testing_utils';
 
 function Probe() {
-    const {teamName, spaceId, pageId, isDraft} = useDocsNavigation();
+    const {teamName, spaceId, pageId, isDraft, isEditing, goToEditPage} = useDocsNavigation();
     return (
         <ul>
             <li data-testid='team'>{teamName}</li>
             <li data-testid='space'>{spaceId ?? ''}</li>
             <li data-testid='page'>{pageId ?? ''}</li>
             <li data-testid='draft'>{String(isDraft)}</li>
+            <li data-testid='edit'>{String(isEditing)}</li>
+            <li>
+                <button
+                    data-testid='go-edit'
+                    onClick={() => goToEditPage('space1', 'pageX')}
+                />
+            </li>
         </ul>
     );
 }
@@ -55,3 +62,44 @@ describe('useDocsNavigation URL parsing', () => {
         expect(renderAt('/')).toEqual({team: 'myteam', space: '', page: '', draft: 'false'});
     });
 });
+
+const editStateAt = (route: string) => {
+    renderWithContext(<Probe/>, {route, state: {currentTeam: {id: 't1', name: 'myteam'}}});
+    return screen.getByTestId('edit').textContent;
+};
+
+describe('useDocsNavigation edit mode', () => {
+    it('is editing when a page URL carries the edit query', () => {
+        expect(editStateAt('/myteam/spaces/space1/pageX?edit=1')).toBe('true');
+    });
+
+    it('is not editing without the query', () => {
+        expect(editStateAt('/myteam/spaces/space1/pageX')).toBe('false');
+    });
+
+    it('is not editing on a space URL, which has no page to edit', () => {
+        expect(editStateAt('/myteam/spaces/space1?edit=1')).toBe('false');
+    });
+
+    it('is not editing on the overview URL, which has no page to edit', () => {
+        expect(editStateAt('/myteam/spaces/space1/overview?edit=1')).toBe('false');
+    });
+
+    it('ignores an edit query with any other value', () => {
+        expect(editStateAt('/myteam/spaces/space1/pageX?edit=0')).toBe('false');
+    });
+});
+
+describe('useDocsNavigation goToEditPage', () => {
+    it('pushes the edit URL so back exits edit mode', () => {
+        const {history} = renderWithContext(<Probe/>, {
+            route: '/myteam/spaces/space1/pageX',
+            state: {currentTeam: {id: 't1', name: 'myteam'}},
+        });
+
+        fireEvent.click(screen.getByTestId('go-edit'));
+
+        expect(history.location.pathname + history.location.search).toBe('/myteam/spaces/space1/pageX?edit=1');
+        expect(history.length).toBe(2);
+    });
+});
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index 50d9b2f..4184cf1 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -3,8 +3,8 @@
 
 import {useTeamContext} from 'hooks/team';
 import {useCallback} from 'react';
-import {useHistory, useRouteMatch} from 'react-router-dom';
-import {DOCS_DRAFT_ROUTE, DOCS_ROUTE, DOCS_SPACE_OVERVIEW_ROUTE, docsHomePath, docsPath, draftPath, overviewPath, pagePath, spacePath} from 'routing/paths';
+import {useHistory, useLocation, useRouteMatch} from 'react-router-dom';
+import {DOCS_DRAFT_ROUTE, DOCS_ROUTE, DOCS_SPACE_OVERVIEW_ROUTE, EDIT_QUERY, docsHomePath, docsPath, draftPath, editPagePath, overviewPath, pagePath, spacePath} from 'routing/paths';
 
 type DocsRouteParams = {
     team?: string;
@@ -32,9 +32,16 @@ export function useDocsNavigation() {
     const isDraft = match?.path === DOCS_DRAFT_ROUTE;
     const isOverview = match?.path === DOCS_SPACE_OVERVIEW_ROUTE;
 
+    const {search} = useLocation();
+
+    // Only a routed page can be edited, so the query alone doesn't mean edit mode:
+    // ?edit=1 on a space or overview URL names nothing to edit and is ignored.
+    const isEditing = Boolean(pageId) && !isOverview && new URLSearchParams(search).get(EDIT_QUERY) === '1';
+
     const goToSpace = useCallback((id: string) => history.push(spacePath(teamName, id)), [history, teamName]);
     const goToPage = useCallback((space: string, page: string) => history.push(pagePath(teamName, space, page)), [history, teamName]);
     const goToDraft = useCallback((space: string, page: string) => history.push(draftPath(teamName, space, page)), [history, teamName]);
+    const goToEditPage = useCallback((space: string, page: string) => history.push(editPagePath(teamName, space, page)), [history, teamName]);
     const goToOverview = useCallback((space: string) => history.push(overviewPath(teamName, space)), [history, teamName]);
     const goHome = useCallback(() => history.push(docsHomePath(teamName)), [history, teamName]);
     const navigate = useCallback((space: string, page?: string) => history.push(docsPath(teamName, space, page)), [history, teamName]);
@@ -48,10 +55,12 @@ export function useDocsNavigation() {
         spaceId,
         pageId,
         isDraft,
+        isEditing,
         isOverview,
         goToSpace,
         goToPage,
         goToDraft,
+        goToEditPage,
         goToOverview,
         goHome,
         navigate,
diff --git a/webapp/src/routing/paths.test.ts b/webapp/src/routing/paths.test.ts
new file mode 100644
index 0000000..332395f
--- /dev/null
+++ b/webapp/src/routing/paths.test.ts
@@ -0,0 +1,14 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {EDIT_QUERY, editPagePath, pagePath} from './paths';
+
+describe('editPagePath', () => {
+    it('appends the edit query to the page path', () => {
+        expect(editPagePath('team-1', 'eng', 'runbook')).toBe('/team-1/spaces/eng/runbook?edit=1');
+    });
+
+    it('builds on pagePath so escaping stays in one place', () => {
+        expect(editPagePath('team 1', 'eng', 'run book')).toBe(`${pagePath('team 1', 'eng', 'run book')}?${EDIT_QUERY}=1`);
+    });
+});
diff --git a/webapp/src/routing/paths.ts b/webapp/src/routing/paths.ts
index 3c5f28d..eb2b166 100644
--- a/webapp/src/routing/paths.ts
+++ b/webapp/src/routing/paths.ts
@@ -60,6 +60,14 @@ export const overviewPath = (teamName: string, spaceId: string): string => `${sp
 
 export const draftPath = (teamName: string, spaceId: string, pageId: string): string => `${spacePath(teamName, spaceId)}/drafts/${segment(pageId)}`;
 
+// Edit mode is a query on the page URL, not a path segment: the page id stays
+// canonical in the path, and /drafts/:pageId is left to mean a page with no
+// published version yet.
+export const EDIT_QUERY = 'edit';
+
+export const editPagePath = (teamName: string, spaceId: string, pageId: string): string =>
+    `${pagePath(teamName, spaceId, pageId)}?${EDIT_QUERY}=1`;
+
 export const docsPath = (teamName: string, spaceId?: string, pageId?: string): string => {
     if (!spaceId) {
         return docsHomePath(teamName);

From fca2d6ced8eb3c9fdf1ee76f344afdcbb21d8127 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 19:58:25 -0500
Subject: [PATCH 29/68] feat(docs): add a PageTitle that reads or edits

A heading while reading, a field while editing, never both: view mode renders no
focusable control. The field composes the heading's type so switching modes moves
the text by nothing.

Prompt: add an edit mode distinct from view mode, then make the page title
inline-editable
---
 webapp/i18n/en.json                           |  1 +
 .../page_content/page_title.module.scss       | 35 +++++++
 .../page_content/page_title.test.tsx          | 95 +++++++++++++++++++
 .../space_view/page_content/page_title.tsx    | 67 +++++++++++++
 4 files changed, 198 insertions(+)
 create mode 100644 webapp/src/components/space_view/page_content/page_title.module.scss
 create mode 100644 webapp/src/components/space_view/page_content/page_title.test.tsx
 create mode 100644 webapp/src/components/space_view/page_content/page_title.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index cce1e1e..42a1d58 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -69,6 +69,7 @@
   "docs.page.addEmoji": "Add emoji",
   "docs.page.byAuthor": "By {name}",
   "docs.page.headerImage": "Header image",
+  "docs.page.titleLabel": "Page title",
   "docs.page.untitled": "Untitled",
   "docs.pageMenu.comingSoon": "Coming soon",
   "docs.pageMenu.copyLink": "Copy link",
diff --git a/webapp/src/components/space_view/page_content/page_title.module.scss b/webapp/src/components/space_view/page_content/page_title.module.scss
new file mode 100644
index 0000000..ddda0ff
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_title.module.scss
@@ -0,0 +1,35 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+.title {
+    margin: 0;
+    overflow-wrap: break-word;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 36px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 44px;
+}
+
+.untitled {
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+}
+
+// Applied with .title, never alone: the field is the heading with its control
+// chrome stripped, so toggling modes doesn't shift the text by a pixel.
+.field {
+    display: block;
+    width: 100%;
+    padding: 0;
+    border: none;
+    background: none;
+
+    &::placeholder {
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
diff --git a/webapp/src/components/space_view/page_content/page_title.test.tsx b/webapp/src/components/space_view/page_content/page_title.test.tsx
new file mode 100644
index 0000000..629e5bd
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_title.test.tsx
@@ -0,0 +1,95 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import PageTitle from './page_title';
+
+import {renderWithContext} from '../../../../tests/react_testing_utils';
+
+const noop = () => {};
+
+const renderTitle = (props: Partial<React.ComponentProps<typeof PageTitle>> = {}) =>
+    renderWithContext(
+        <PageTitle
+            value='Runbook'
+            editing={false}
+            onChange={noop}
+            onCommit={noop}
+            onCancel={noop}
+            {...props}
+        />,
+    );
+
+describe('PageTitle view mode', () => {
+    it('renders a heading and no editable field', () => {
+        renderTitle();
+
+        expect(screen.getByRole('heading', {name: 'Runbook'})).toBeInTheDocument();
+        expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+
+    it('shows the untitled fallback when the page has no title', () => {
+        renderTitle({value: ''});
+
+        expect(screen.getByRole('heading', {name: 'Untitled'})).toBeInTheDocument();
+    });
+});
+
+describe('PageTitle edit mode', () => {
+    it('renders an editable field and no heading', () => {
+        renderTitle({editing: true});
+
+        expect(screen.getByRole('textbox', {name: 'Page title'})).toHaveValue('Runbook');
+        expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    });
+
+    it('caps the field at the server title limit', () => {
+        renderTitle({editing: true});
+
+        expect(screen.getByRole('textbox', {name: 'Page title'})).toHaveAttribute('maxlength', '255');
+    });
+
+    it('reports each keystroke without committing', () => {
+        const onChange = jest.fn();
+        const onCommit = jest.fn();
+        renderTitle({editing: true, onChange, onCommit});
+
+        fireEvent.change(screen.getByRole('textbox', {name: 'Page title'}), {target: {value: 'Runbooks'}});
+
+        expect(onChange).toHaveBeenCalledWith('Runbooks');
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+
+    it('commits on Enter without inserting a newline', () => {
+        const onCommit = jest.fn();
+        renderTitle({editing: true, onCommit});
+        const field = screen.getByRole('textbox', {name: 'Page title'});
+
+        const notPrevented = fireEvent.keyDown(field, {key: 'Enter'});
+
+        expect(onCommit).toHaveBeenCalledTimes(1);
+        expect(notPrevented).toBe(false);
+    });
+
+    it('commits on blur', () => {
+        const onCommit = jest.fn();
+        renderTitle({editing: true, onCommit});
+
+        fireEvent.blur(screen.getByRole('textbox', {name: 'Page title'}));
+
+        expect(onCommit).toHaveBeenCalledTimes(1);
+    });
+
+    it('cancels on Escape without committing', () => {
+        const onCommit = jest.fn();
+        const onCancel = jest.fn();
+        renderTitle({editing: true, onCommit, onCancel});
+
+        fireEvent.keyDown(screen.getByRole('textbox', {name: 'Page title'}), {key: 'Escape'});
+
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+});
diff --git a/webapp/src/components/space_view/page_content/page_title.tsx b/webapp/src/components/space_view/page_content/page_title.tsx
new file mode 100644
index 0000000..b7c3e2f
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_title.tsx
@@ -0,0 +1,67 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Input as BaseInput} from '@base-ui-components/react/input';
+import classNames from 'classnames';
+import React from 'react';
+import {useIntl} from 'react-intl';
+
+import styles from './page_title.module.scss';
+
+// The server's model.PageTitleMaxRunes.
+const TITLE_MAX_LENGTH = 255;
+
+type Props = {
+    value: string;
+    editing: boolean;
+    onChange: (value: string) => void;
+    onCommit: () => void;
+    onCancel: () => void;
+};
+
+/**
+ * The page's title, as a heading while reading and as a field while editing. The
+ * two are exclusive: view mode renders no focusable control, so a page the reader
+ * cannot change offers nothing to tab into.
+ *
+ * `onCommit` and `onCancel` are named for intent rather than for the events that
+ * raise them, because which events those are belongs to this component: both blur
+ * and Enter commit, and Escape cancels.
+ */
+const PageTitle = ({value, editing, onChange, onCommit, onCancel}: Props) => {
+    const {formatMessage} = useIntl();
+    const untitled = formatMessage({id: 'docs.page.untitled', defaultMessage: 'Untitled'});
+
+    if (!editing) {
+        return (
+            <h1 className={classNames(styles.title, {[styles.untitled]: !value})}>
+                {value || untitled}
+            </h1>
+        );
+    }
+
+    return (
+        <BaseInput
+            className={classNames(styles.title, styles.field)}
+            value={value}
+            maxLength={TITLE_MAX_LENGTH}
+            placeholder={untitled}
+            aria-label={formatMessage({id: 'docs.page.titleLabel', defaultMessage: 'Page title'})}
+            onValueChange={(newValue) => onChange(newValue)}
+            onBlur={onCommit}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                    // A title is one line; Enter means "done", not "new line".
+                    e.preventDefault();
+                    onCommit();
+                }
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    onCancel();
+                }
+            }}
+        />
+    );
+};
+
+export default PageTitle;

From b04cdd6a5510cc3688cb461834c1103e094e973d Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 21:04:41 -0500
Subject: [PATCH 30/68] feat(docs): toggle page edit mode from the header

The header's Edit button was scaffolding with no handler; it now navigates to
?edit=1 and reads Done while editing. Layout is identical in both modes, so
nothing reflows on the toggle.

Prompt: add an edit mode distinct from view mode, then make the page title
inline-editable
---
 webapp/i18n/en.json                           |  1 +
 .../page_content/page_content.module.scss     | 15 ----
 .../space_view/page_content/page_content.tsx  | 29 +++++---
 .../space_view/page_header.test.tsx           | 68 +++++++++++++++++++
 .../src/components/space_view/page_header.tsx | 23 +++++--
 .../src/components/space_view/space_view.tsx  | 19 +++++-
 6 files changed, 124 insertions(+), 31 deletions(-)
 create mode 100644 webapp/src/components/space_view/page_header.test.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 42a1d58..0f5879d 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -151,6 +151,7 @@
   "docs.space.comments": "Comments",
   "docs.space.descriptionPlaceholder": "Add a space description here — just a brief summary of the purpose for this space.",
   "docs.space.details": "Space details",
+  "docs.space.done": "Done",
   "docs.space.edit": "Edit",
   "docs.space.expand": "Expand",
   "docs.space.favorite": "Favorite this space",
diff --git a/webapp/src/components/space_view/page_content/page_content.module.scss b/webapp/src/components/space_view/page_content/page_content.module.scss
index 76f76a7..a66eb93 100644
--- a/webapp/src/components/space_view/page_content/page_content.module.scss
+++ b/webapp/src/components/space_view/page_content/page_content.module.scss
@@ -52,21 +52,6 @@
     line-height: 16px;
 }
 
-.title {
-    margin: 0;
-    overflow-wrap: break-word;
-    color: var(--center-channel-color);
-    font-family: 'Metropolis', sans-serif;
-    font-size: 36px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    line-height: 44px;
-}
-
-.titleUntitled {
-    color: rgba(var(--center-channel-color-rgb), 0.56);
-}
-
 .metadata {
     display: flex;
     flex-wrap: wrap;
diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
index e91113d..1be9486 100644
--- a/webapp/src/components/space_view/page_content/page_content.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -1,10 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import classNames from 'classnames';
 import {useUserProfile} from 'hooks/members';
 import {useDocsNavigation} from 'hooks/navigation';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Avatar} from 'webapp_globals';
 
@@ -18,6 +17,7 @@ import type {Page} from 'types/docs';
 
 import styles from './page_content.module.scss';
 import PageContentPlaceholder from './page_content_placeholder';
+import PageTitle from './page_title';
 
 type Props = {
 
@@ -25,12 +25,13 @@ type Props = {
     // space's pages are still loading (an id that doesn't belong to the space
     // redirects instead of rendering here).
     page?: Page;
+    editing: boolean;
 };
 
 // The selected page's content column: a title area over the page body, which is
 // the editor. Until the routed page arrives in the store there is no title and no
 // id to open the editor on, so that window stays a skeleton.
-const PageContent = ({page}: Props) => {
+const PageContent = ({page, editing}: Props) => {
     const {isDraft} = useDocsNavigation();
 
     return (
@@ -38,7 +39,10 @@ const PageContent = ({page}: Props) => {
             <article className={styles.article}>
                 {page ? (
                     <>
-                        <PageTitleArea page={page}/>
+                        <PageTitleArea
+                            page={page}
+                            editing={editing}
+                        />
                         <PageEditor
                             spaceId={page.space_id}
                             pageId={page.id}
@@ -56,9 +60,14 @@ const PageContent = ({page}: Props) => {
 // Title, byline, and the decoration actions that reveal on hover. Adding an
 // emoji or a header image needs page props the editor work will bring, so those
 // two are affordances only for now.
-const PageTitleArea = ({page}: {page: Page}) => {
+const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     const {formatMessage} = useIntl();
     const author = useUserProfile(page.user_id);
+    const [title, setTitle] = useState(page.title);
+
+    // A title edited elsewhere (the rename modal, another client) replaces the
+    // buffer; the routed page changing does too, since the component is reused.
+    useEffect(() => setTitle(page.title), [page.id, page.title]);
 
     return (
         <header className={styles.titleArea}>
@@ -81,9 +90,13 @@ const PageTitleArea = ({page}: {page: Page}) => {
                 </Button>
             </div>
 
-            <h1 className={classNames(styles.title, {[styles.titleUntitled]: !page.title})}>
-                {page.title || formatMessage({id: 'docs.page.untitled', defaultMessage: 'Untitled'})}
-            </h1>
+            <PageTitle
+                value={title}
+                editing={editing}
+                onChange={setTitle}
+                onCommit={() => setTitle(title.trim())}
+                onCancel={() => setTitle(page.title)}
+            />
 
             {author?.displayName && (
                 <div className={styles.metadata}>
diff --git a/webapp/src/components/space_view/page_header.test.tsx b/webapp/src/components/space_view/page_header.test.tsx
new file mode 100644
index 0000000..512703c
--- /dev/null
+++ b/webapp/src/components/space_view/page_header.test.tsx
@@ -0,0 +1,68 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import {makePage, makeSpace} from 'store/test_fixtures';
+
+import PageHeader from './page_header';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+jest.mock('webapp_globals', () => ({Timestamp: () => null}));
+jest.mock('hooks/pages', () => ({useCreateRootPage: () => jest.fn()}));
+
+// Stubbed at the hook boundary: mattermost-redux's preferences actions are
+// published as ESM that jest doesn't transform.
+jest.mock('hooks/favorites', () => ({
+    useIsFavorite: () => false,
+    useToggleFavorite: () => jest.fn(),
+}));
+
+const SPACE = makeSpace('eng', 'Engineering');
+const PAGE = makePage('runbook', 'eng', 'Runbook');
+
+const renderHeader = (props: Partial<React.ComponentProps<typeof PageHeader>> = {}) =>
+    renderWithContext(
+        <PageHeader
+            space={SPACE}
+            page={PAGE}
+            treeOpen={false}
+            editing={false}
+            onTogglePages={jest.fn()}
+            onToggleEdit={jest.fn()}
+            {...props}
+        />,
+    );
+
+describe('PageHeader edit control', () => {
+    it('offers Edit while reading', () => {
+        renderHeader();
+
+        expect(screen.getByRole('button', {name: 'Edit'})).toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Done'})).not.toBeInTheDocument();
+    });
+
+    it('offers Done while editing', () => {
+        renderHeader({editing: true});
+
+        expect(screen.getByRole('button', {name: 'Done'})).toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Edit'})).not.toBeInTheDocument();
+    });
+
+    it('reports a click on the control', () => {
+        const onToggleEdit = jest.fn();
+        renderHeader({onToggleEdit});
+
+        fireEvent.click(screen.getByRole('button', {name: 'Edit'}));
+
+        expect(onToggleEdit).toHaveBeenCalledTimes(1);
+    });
+
+    it('offers no edit control on the space home, where no page is routed', () => {
+        renderHeader({page: undefined});
+
+        expect(screen.queryByRole('button', {name: 'Edit'})).not.toBeInTheDocument();
+    });
+});
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 9528a41..ef3e39c 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -10,6 +10,7 @@ import {Timestamp} from 'webapp_globals';
 import type {TimestampUnit} from 'webapp_globals';
 
 import ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';
+import CheckIcon from '@mattermost/compass-icons/components/check';
 import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';
 import FormatListBulletedIcon from '@mattermost/compass-icons/components/format-list-bulleted';
 import MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';
@@ -57,12 +58,14 @@ type Props = {
     // last-updated time shows.
     page?: Page;
     treeOpen: boolean;
+    editing: boolean;
     onTogglePages: () => void;
+    onToggleEdit: () => void;
 };
 
 // Page controls (comments, edit, overflow, expand) are visual scaffolding wired
 // in later passes; the pages toggle drives the page tree panel.
-const PageHeader = ({space, page, treeOpen, onTogglePages}: Props) => {
+const PageHeader = ({space, page, treeOpen, editing, onTogglePages, onToggleEdit}: Props) => {
     const {formatMessage} = useIntl();
     const createRootPage = useCreateRootPage(space.id);
 
@@ -151,12 +154,20 @@ const PageHeader = ({space, page, treeOpen, onTogglePages}: Props) => {
                             emphasis='quaternary'
                             size='sm'
                             className={classNames('docs-btn-neutral', styles.iconLabel)}
-                            leadingIcon={<PencilOutlineIcon size={18}/>}
+                            leadingIcon={editing ? <CheckIcon size={18}/> : <PencilOutlineIcon size={18}/>}
+                            onClick={onToggleEdit}
                         >
-                            <FormattedMessage
-                                id='docs.space.edit'
-                                defaultMessage='Edit'
-                            />
+                            {editing ? (
+                                <FormattedMessage
+                                    id='docs.space.done'
+                                    defaultMessage='Done'
+                                />
+                            ) : (
+                                <FormattedMessage
+                                    id='docs.space.edit'
+                                    defaultMessage='Edit'
+                                />
+                            )}
                         </Button>
                         <PageMenu
                             spaceId={space.id}
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index c67b514..352c729 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -32,7 +32,7 @@ import styles from './space_view.module.scss';
 // (hero) until a page is routed, at which point it shows that page instead.
 // Page bodies are a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
-    const {pageId, paths} = useDocsNavigation();
+    const {pageId, isEditing, paths, goToPage, goToEditPage} = useDocsNavigation();
     const page = useAppSelector((state) => (pageId ? getPageInSpace(state, space.id, pageId) : undefined));
     const pagesLoaded = useAppSelector((state) => arePagesLoadedForSpace(state, space.id));
     const {pageCount, memberCount} = useSpaceStats(space.id);
@@ -44,6 +44,16 @@ const SpaceView = ({space}: {space: Space}) => {
     const toggleInfo = useCallback(() => setInfoView((view) => (view ? null : 'root')), []);
     const closeInfo = useCallback(() => setInfoView(null), []);
     const showMembers = useCallback(() => setInfoView('members'), []);
+    const toggleEdit = useCallback(() => {
+        if (!pageId) {
+            return;
+        }
+        if (isEditing) {
+            goToPage(space.id, pageId);
+        } else {
+            goToEditPage(space.id, pageId);
+        }
+    }, [isEditing, pageId, space.id, goToPage, goToEditPage]);
 
     // A space with a default page opens on that page; `<Redirect>` replaces the
     // space-home entry rather than pushing one.
@@ -73,7 +83,9 @@ const SpaceView = ({space}: {space: Space}) => {
                     space={space}
                     page={page}
                     treeOpen={treeOpen}
+                    editing={isEditing}
                     onTogglePages={togglePages}
+                    onToggleEdit={toggleEdit}
                 />
                 <div className={styles.body}>
                     <Sidebar open={treeOpen}>
@@ -82,7 +94,10 @@ const SpaceView = ({space}: {space: Space}) => {
                     <div className={styles.main}>
                         <div className={styles.scroll}>
                             {pageId ? (
-                                <PageContent page={page}/>
+                                <PageContent
+                                    page={page}
+                                    editing={isEditing}
+                                />
                             ) : (
                                 <div className={styles.content}>
                                     <PageHero

From 72223c9f872a6471d3226f077abeccad73c098fc Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 21:32:51 -0500
Subject: [PATCH 31/68] feat(docs): save an inline title edit on commit

Enter or blur writes through the existing updatePage action, which carries the
edit_at baseline; Escape reverts. A failed write keeps the typed title and toasts
rather than reverting, which would read as a silent loss.

Interim: this writes to the published page. When the draft DAL lands, commit
becomes a draft patch and the title stops being live until publish.

Prompt: add an edit mode distinct from view mode, then make the page title
inline-editable
---
 webapp/i18n/en.json                           |   1 +
 .../page_content/page_content.test.tsx        | 105 ++++++++++++++++++
 .../space_view/page_content/page_content.tsx  |  28 ++++-
 3 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/components/space_view/page_content/page_content.test.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 0f5879d..eda1522 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -70,6 +70,7 @@
   "docs.page.byAuthor": "By {name}",
   "docs.page.headerImage": "Header image",
   "docs.page.titleLabel": "Page title",
+  "docs.page.titleSaveFailed": "Could not rename the page. Please try again.",
   "docs.page.untitled": "Untitled",
   "docs.pageMenu.comingSoon": "Coming soon",
   "docs.pageMenu.copyLink": "Copy link",
diff --git a/webapp/src/components/space_view/page_content/page_content.test.tsx b/webapp/src/components/space_view/page_content/page_content.test.tsx
new file mode 100644
index 0000000..03d8b58
--- /dev/null
+++ b/webapp/src/components/space_view/page_content/page_content.test.tsx
@@ -0,0 +1,105 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import React from 'react';
+
+import {makePage} from 'store/test_fixtures';
+
+import PageContent from './page_content';
+
+import {renderWithContext} from '../../../../tests/react_testing_utils';
+
+const mockUpdatePage = jest.fn();
+const mockToastError = jest.fn();
+
+// updatePage is a thunk, so the mock has to be a thunk too rather than a bare
+// promise — otherwise the thunk middleware never touches it and the rejection
+// in the failed-write test goes unhandled.
+jest.mock('store/actions', () => ({
+    updatePage: (...args: unknown[]) => () => mockUpdatePage(...args),
+}));
+jest.mock('components/toast', () => ({toast: {error: (...args: unknown[]) => mockToastError(...args)}}));
+jest.mock('hooks/members', () => ({useUserProfile: () => undefined}));
+
+const PAGE = makePage('runbook', 'eng', 'Runbook');
+
+const renderContent = () => renderWithContext(
+    <PageContent
+        page={PAGE}
+        editing={true}
+    />,
+);
+
+const field = () => screen.getByRole('textbox', {name: 'Page title'});
+
+describe('PageContent title commit', () => {
+    beforeEach(() => {
+        mockUpdatePage.mockReset().mockReturnValue(Promise.resolve(PAGE));
+        mockToastError.mockReset();
+    });
+
+    it('does not write while typing', () => {
+        renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+
+        expect(mockUpdatePage).not.toHaveBeenCalled();
+    });
+
+    it('writes the trimmed title on Enter', async () => {
+        renderContent();
+
+        fireEvent.change(field(), {target: {value: '  Runbooks  '}});
+        fireEvent.keyDown(field(), {key: 'Enter'});
+
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'runbook', {title: 'Runbooks'}));
+    });
+
+    it('writes on blur', async () => {
+        renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        fireEvent.blur(field());
+
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'runbook', {title: 'Runbooks'}));
+    });
+
+    it('does not write when the title is unchanged', () => {
+        renderContent();
+
+        fireEvent.keyDown(field(), {key: 'Enter'});
+
+        expect(mockUpdatePage).not.toHaveBeenCalled();
+    });
+
+    it('writes an emptied title, which the server accepts', async () => {
+        renderContent();
+
+        fireEvent.change(field(), {target: {value: ''}});
+        fireEvent.keyDown(field(), {key: 'Enter'});
+
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'runbook', {title: ''}));
+    });
+
+    it('reverts on Escape without writing', () => {
+        renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        fireEvent.keyDown(field(), {key: 'Escape'});
+
+        expect(field()).toHaveValue('Runbook');
+        expect(mockUpdatePage).not.toHaveBeenCalled();
+    });
+
+    it('keeps the typed title and reports a failed write', async () => {
+        mockUpdatePage.mockReturnValue(Promise.reject(new Error('nope')));
+        renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        fireEvent.keyDown(field(), {key: 'Enter'});
+
+        await waitFor(() => expect(mockToastError).toHaveBeenCalled());
+        expect(field()).toHaveValue('Runbooks');
+    });
+});
diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
index 1be9486..9dbf520 100644
--- a/webapp/src/components/space_view/page_content/page_content.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -3,6 +3,7 @@
 
 import {useUserProfile} from 'hooks/members';
 import {useDocsNavigation} from 'hooks/navigation';
+import {useAppDispatch} from 'hooks/redux';
 import React, {useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Avatar} from 'webapp_globals';
@@ -10,8 +11,11 @@ import {Avatar} from 'webapp_globals';
 import EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';
 import ImageOutlineIcon from '@mattermost/compass-icons/components/image-outline';
 
+import {updatePage} from 'store/actions';
+
 import {Button} from 'components/form_controls/button';
 import PageEditor from 'components/page_editor/page_editor';
+import {toast} from 'components/toast';
 
 import type {Page} from 'types/docs';
 
@@ -64,11 +68,33 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     const {formatMessage} = useIntl();
     const author = useUserProfile(page.user_id);
     const [title, setTitle] = useState(page.title);
+    const dispatch = useAppDispatch();
 
     // A title edited elsewhere (the rename modal, another client) replaces the
     // buffer; the routed page changing does too, since the component is reused.
     useEffect(() => setTitle(page.title), [page.id, page.title]);
 
+    // Trailing whitespace is never intentional in a title, and a title that only
+    // changed by whitespace is not a change worth a write.
+    const commit = async () => {
+        const next = title.trim();
+        setTitle(next);
+        if (next === page.title) {
+            return;
+        }
+
+        try {
+            await dispatch(updatePage(page.space_id, page.id, {title: next}));
+        } catch {
+            // Keep the typed title: reverting would look like the edit was taken
+            // and then silently lost.
+            toast.error(formatMessage({
+                id: 'docs.page.titleSaveFailed',
+                defaultMessage: 'Could not rename the page. Please try again.',
+            }));
+        }
+    };
+
     return (
         <header className={styles.titleArea}>
             <div className={styles.topActions}>
@@ -94,7 +120,7 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
                 value={title}
                 editing={editing}
                 onChange={setTitle}
-                onCommit={() => setTitle(title.trim())}
+                onCommit={commit}
                 onCancel={() => setTitle(page.title)}
             />
 

From 0206074dd494c60d5cb7d64a08e0aa7864bb2c48 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 21:38:32 -0500
Subject: [PATCH 32/68] fix(docs): guard against duplicate title writes in
 flight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enter and blur are independent commit triggers, so both can fire before a
prior write resolves and the store's page.title catches up — the unchanged
check alone let a second, redundant updatePage dispatch through on the same
stale baseline, which could surface as a spurious failure toast if the first
write's edit_at bump turned the second into a conflict. A ref-backed in-flight
flag now blocks the second dispatch while one is pending.

Prompt: fix review finding - duplicate-write race on rapid Enter-then-blur in
page_content.tsx PageTitleArea.commit
---
 .../page_content/page_content.test.tsx          | 17 +++++++++++++++++
 .../space_view/page_content/page_content.tsx    | 17 ++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/space_view/page_content/page_content.test.tsx b/webapp/src/components/space_view/page_content/page_content.test.tsx
index 03d8b58..37ea4bd 100644
--- a/webapp/src/components/space_view/page_content/page_content.test.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.test.tsx
@@ -102,4 +102,21 @@ describe('PageContent title commit', () => {
         await waitFor(() => expect(mockToastError).toHaveBeenCalled());
         expect(field()).toHaveValue('Runbooks');
     });
+
+    it('does not fire a second write while the first is still in flight', async () => {
+        let resolveWrite: (value: typeof PAGE) => void = () => {};
+        mockUpdatePage.mockReturnValue(new Promise((resolve) => {
+            resolveWrite = resolve;
+        }));
+        renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        fireEvent.keyDown(field(), {key: 'Enter'});
+        fireEvent.blur(field());
+
+        expect(mockUpdatePage).toHaveBeenCalledTimes(1);
+
+        resolveWrite(PAGE);
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledTimes(1));
+    });
 });
diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
index 9dbf520..6392258 100644
--- a/webapp/src/components/space_view/page_content/page_content.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -4,7 +4,7 @@
 import {useUserProfile} from 'hooks/members';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Avatar} from 'webapp_globals';
 
@@ -70,6 +70,13 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     const [title, setTitle] = useState(page.title);
     const dispatch = useAppDispatch();
 
+    // Enter and blur are independent triggers (Enter doesn't blur the field), so
+    // both can fire commit before a prior write resolves and the store's page.title
+    // catches up. Without this guard a second write goes out on the same stale
+    // baseline — wasted at best, a spurious failure toast at worst if the first
+    // write's edit_at bump turns the second into a conflict.
+    const commitInFlight = useRef(false);
+
     // A title edited elsewhere (the rename modal, another client) replaces the
     // buffer; the routed page changing does too, since the component is reused.
     useEffect(() => setTitle(page.title), [page.id, page.title]);
@@ -79,19 +86,23 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     const commit = async () => {
         const next = title.trim();
         setTitle(next);
-        if (next === page.title) {
+        if (next === page.title || commitInFlight.current) {
             return;
         }
 
+        commitInFlight.current = true;
         try {
             await dispatch(updatePage(page.space_id, page.id, {title: next}));
         } catch {
             // Keep the typed title: reverting would look like the edit was taken
-            // and then silently lost.
+            // and then silently lost. The rejection reason itself isn't
+            // actionable here, so it's deliberately dropped rather than logged.
             toast.error(formatMessage({
                 id: 'docs.page.titleSaveFailed',
                 defaultMessage: 'Could not rename the page. Please try again.',
             }));
+        } finally {
+            commitInFlight.current = false;
         }
     };
 

From 9aec0d47c8ed0abccce053db95b6b78dfe928e04 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 22:02:41 -0500
Subject: [PATCH 33/68] fix(docs): commit the page title when edit mode exits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every commit trigger was an event on the input, so exiting edit mode by URL
(Back, another page) unmounted the field without a blur and dropped what was
typed — while the heading went on rendering the buffer as if the write had
landed. Leaving edit mode is now a trigger in its own right, via the cleanup of
an effect keyed on `editing`, and reading mode renders the stored title rather
than the buffer.

The in-flight guard also swallowed a later, *different* edit, which the resync
effect then erased. A write now retries with whatever the buffer holds when it
settles, and the resync only adopts an incoming title when the buffer has no
unsaved input. The buffer is keyed on the page, so a newly routed page can never
inherit it and an in-flight write keeps targeting the page it started on.

Findings F1, F2 and the failed-commit and resync-coverage minors from the final
whole-branch review.
---
 .../page_content/page_content.test.tsx        | 98 ++++++++++++++++++-
 .../space_view/page_content/page_content.tsx  | 70 +++++++++++--
 2 files changed, 157 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/space_view/page_content/page_content.test.tsx b/webapp/src/components/space_view/page_content/page_content.test.tsx
index 37ea4bd..22e60af 100644
--- a/webapp/src/components/space_view/page_content/page_content.test.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.test.tsx
@@ -24,13 +24,16 @@ jest.mock('hooks/members', () => ({useUserProfile: () => undefined}));
 
 const PAGE = makePage('runbook', 'eng', 'Runbook');
 
-const renderContent = () => renderWithContext(
+const content = (props: Partial<React.ComponentProps<typeof PageContent>> = {}) => (
     <PageContent
         page={PAGE}
         editing={true}
-    />,
+        {...props}
+    />
 );
 
+const renderContent = () => renderWithContext(content());
+
 const field = () => screen.getByRole('textbox', {name: 'Page title'});
 
 describe('PageContent title commit', () => {
@@ -119,4 +122,95 @@ describe('PageContent title commit', () => {
         resolveWrite(PAGE);
         await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledTimes(1));
     });
+
+    it('sends what was typed while the first write was in flight, once it settles', async () => {
+        let resolveWrite: (value: typeof PAGE) => void = () => {};
+        mockUpdatePage.mockReturnValueOnce(new Promise((resolve) => {
+            resolveWrite = resolve;
+        }));
+        const {rerender} = renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        fireEvent.keyDown(field(), {key: 'Enter'});
+        fireEvent.change(field(), {target: {value: 'Runbooks and drills'}});
+        fireEvent.blur(field());
+
+        expect(mockUpdatePage).toHaveBeenCalledTimes(1);
+
+        // The first write lands, so the store's title catches up before the promise
+        // the caller is awaiting resolves.
+        rerender(content({page: makePage('runbook', 'eng', 'Runbooks')}));
+        resolveWrite(PAGE);
+
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledTimes(2));
+        expect(mockUpdatePage).toHaveBeenLastCalledWith('eng', 'runbook', {title: 'Runbooks and drills'});
+        expect(field()).toHaveValue('Runbooks and drills');
+    });
+
+    it('commits on leaving edit mode, which raises no blur', async () => {
+        const {rerender} = renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        rerender(content({editing: false}));
+
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'runbook', {title: 'Runbooks'}));
+    });
+
+    it('does not commit again on leaving edit mode when a blur already wrote', async () => {
+        const {rerender} = renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        fireEvent.blur(field());
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledTimes(1));
+
+        rerender(content({page: makePage('runbook', 'eng', 'Runbooks'), editing: false}));
+
+        await Promise.resolve();
+        expect(mockUpdatePage).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows the stored title, not the rejected one, once back in reading mode', async () => {
+        mockUpdatePage.mockReturnValue(Promise.reject(new Error('nope')));
+        const {rerender} = renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        rerender(content({editing: false}));
+
+        await waitFor(() => expect(mockToastError).toHaveBeenCalled());
+        expect(screen.getByRole('heading', {name: 'Runbook'})).toBeInTheDocument();
+    });
+});
+
+describe('PageContent title buffer', () => {
+    beforeEach(() => {
+        mockUpdatePage.mockReset().mockReturnValue(Promise.resolve(PAGE));
+        mockToastError.mockReset();
+    });
+
+    it('follows a title changed elsewhere while nothing is typed', () => {
+        const {rerender} = renderContent();
+
+        rerender(content({page: makePage('runbook', 'eng', 'Renamed elsewhere')}));
+
+        expect(field()).toHaveValue('Renamed elsewhere');
+    });
+
+    it('keeps typed input when a title arrives from elsewhere', () => {
+        const {rerender} = renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        rerender(content({page: makePage('runbook', 'eng', 'Renamed elsewhere')}));
+
+        expect(field()).toHaveValue('Runbooks');
+    });
+
+    it('starts over for another routed page, committing what was typed for the last one', async () => {
+        const {rerender} = renderContent();
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        rerender(content({page: makePage('oncall', 'eng', 'On call')}));
+
+        expect(field()).toHaveValue('On call');
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'runbook', {title: 'Runbooks'}));
+    });
 });
diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
index 6392258..719d3e8 100644
--- a/webapp/src/components/space_view/page_content/page_content.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -4,7 +4,7 @@
 import {useUserProfile} from 'hooks/members';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Avatar} from 'webapp_globals';
 
@@ -43,7 +43,12 @@ const PageContent = ({page, editing}: Props) => {
             <article className={styles.article}>
                 {page ? (
                     <>
+                        {/* The title buffer belongs to one page: keying it means a
+                            newly routed page never inherits what was typed for the
+                            last one, and a write already in flight keeps targeting
+                            the page it started on. */}
                         <PageTitleArea
+                            key={page.id}
                             page={page}
                             editing={editing}
                         />
@@ -70,6 +75,14 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     const [title, setTitle] = useState(page.title);
     const dispatch = useAppDispatch();
 
+    // Commit runs from an effect cleanup and from a settled write, neither of which
+    // can see the render they were created in; the ref is the buffer as it is now.
+    const titleRef = useRef(title);
+    const setBuffer = useCallback((next: string) => {
+        titleRef.current = next;
+        setTitle(next);
+    }, []);
+
     // Enter and blur are independent triggers (Enter doesn't blur the field), so
     // both can fire commit before a prior write resolves and the store's page.title
     // catches up. Without this guard a second write goes out on the same stale
@@ -77,15 +90,30 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     // write's edit_at bump turns the second into a conflict.
     const commitInFlight = useRef(false);
 
-    // A title edited elsewhere (the rename modal, another client) replaces the
-    // buffer; the routed page changing does too, since the component is reused.
-    useEffect(() => setTitle(page.title), [page.id, page.title]);
+    // The title this component last took from the page. The buffer holding anything
+    // else means there is unsaved input, which an incoming title must not replace —
+    // including the title our own write just put in the store, since the user may
+    // have typed on while it was in flight.
+    const observedTitle = useRef(page.title);
+    useEffect(() => {
+        const previous = observedTitle.current;
+        observedTitle.current = page.title;
+        if (titleRef.current === previous) {
+            setBuffer(page.title);
+        }
+    }, [page.title, setBuffer]);
+
+    // Deferred callers reach commit through the ref so they run the current one,
+    // which reads today's page.title rather than the one their closure captured.
+    const commitRef = useRef<() => Promise<void>>();
 
     // Trailing whitespace is never intentional in a title, and a title that only
     // changed by whitespace is not a change worth a write.
     const commit = async () => {
-        const next = title.trim();
-        setTitle(next);
+        const next = titleRef.current.trim();
+        if (next !== titleRef.current) {
+            setBuffer(next);
+        }
         if (next === page.title || commitInFlight.current) {
             return;
         }
@@ -104,7 +132,28 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
         } finally {
             commitInFlight.current = false;
         }
+
+        // Anything typed while that write was in flight was turned away by the
+        // guard above and would otherwise be lost. One extra write per round trip
+        // at most, and the last thing typed is the one that lands.
+        if (titleRef.current.trim() !== next) {
+            await commitRef.current?.();
+        }
     };
+    commitRef.current = commit;
+
+    // Leaving edit mode is a commit trigger like blur and Enter: unmounting the
+    // field raises no blur event, so exits that don't go through the field — Back,
+    // routing to another page — would otherwise drop what was typed. Committing an
+    // unchanged title is already a no-op, so a blur that beat us here writes once.
+    useEffect(() => {
+        if (!editing) {
+            return undefined;
+        }
+        return () => {
+            commitRef.current?.();
+        };
+    }, [editing]);
 
     return (
         <header className={styles.titleArea}>
@@ -127,12 +176,15 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
                 </Button>
             </div>
 
+            {/* Reading mode shows the stored title, not the buffer: a commit that
+                failed keeps the typed value in the field for another try, but the
+                heading must not present it as the page's title. */}
             <PageTitle
-                value={title}
+                value={editing ? title : page.title}
                 editing={editing}
-                onChange={setTitle}
+                onChange={setBuffer}
                 onCommit={commit}
-                onCancel={() => setTitle(page.title)}
+                onCancel={() => setBuffer(page.title)}
             />
 
             {author?.displayName && (

From 8cbf75e1837c9b3857ca2f32b3a138bbb235591d Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 22:02:54 -0500
Subject: [PATCH 34/68] fix(docs): make edit mode reachable by keyboard and SR

Activating Edit left focus on the header button, and the field that had just
appeared sat behind the whole page tree in tab order. The field now takes focus
when it mounts, which is exactly when edit mode opens. The toggle carries
`aria-pressed`, since a label changing from Edit to Done on a button that
already holds focus is not reliably re-announced.

Also records why `onValueChange` keeps its wrapper: Base UI passes event details
as a second argument, which `onChange` does not accept.

Finding F3 from the final whole-branch review.
---
 .../space_view/page_content/page_title.test.tsx    |  6 ++++++
 .../space_view/page_content/page_title.tsx         |  9 +++++++++
 .../src/components/space_view/page_header.test.tsx | 14 ++++++++++++++
 webapp/src/components/space_view/page_header.tsx   |  5 +++++
 4 files changed, 34 insertions(+)

diff --git a/webapp/src/components/space_view/page_content/page_title.test.tsx b/webapp/src/components/space_view/page_content/page_title.test.tsx
index 629e5bd..eb3d099 100644
--- a/webapp/src/components/space_view/page_content/page_title.test.tsx
+++ b/webapp/src/components/space_view/page_content/page_title.test.tsx
@@ -45,6 +45,12 @@ describe('PageTitle edit mode', () => {
         expect(screen.queryByRole('heading')).not.toBeInTheDocument();
     });
 
+    it('takes focus, since the field appears in response to asking to edit', () => {
+        renderTitle({editing: true});
+
+        expect(screen.getByRole('textbox', {name: 'Page title'})).toHaveFocus();
+    });
+
     it('caps the field at the server title limit', () => {
         renderTitle({editing: true});
 
diff --git a/webapp/src/components/space_view/page_content/page_title.tsx b/webapp/src/components/space_view/page_content/page_title.tsx
index b7c3e2f..a61767d 100644
--- a/webapp/src/components/space_view/page_content/page_title.tsx
+++ b/webapp/src/components/space_view/page_content/page_title.tsx
@@ -47,6 +47,15 @@ const PageTitle = ({value, editing, onChange, onCommit, onCancel}: Props) => {
             maxLength={TITLE_MAX_LENGTH}
             placeholder={untitled}
             aria-label={formatMessage({id: 'docs.page.titleLabel', defaultMessage: 'Page title'})}
+
+            // The field mounts only on entering edit mode, so this focuses on the
+            // gesture that asked to edit rather than on page load. Without it the
+            // field is unreachable by keyboard without tabbing the whole page tree,
+            // which sits between the Edit control and here in DOM order.
+            autoFocus={true}
+
+            // Not `onValueChange={onChange}`: Base UI also passes event details,
+            // and onChange's contract is the value alone.
             onValueChange={(newValue) => onChange(newValue)}
             onBlur={onCommit}
             onKeyDown={(e) => {
diff --git a/webapp/src/components/space_view/page_header.test.tsx b/webapp/src/components/space_view/page_header.test.tsx
index 512703c..0ffd0fd 100644
--- a/webapp/src/components/space_view/page_header.test.tsx
+++ b/webapp/src/components/space_view/page_header.test.tsx
@@ -51,6 +51,20 @@ describe('PageHeader edit control', () => {
         expect(screen.queryByRole('button', {name: 'Edit'})).not.toBeInTheDocument();
     });
 
+    // A label that changes on a button already holding focus is not reliably
+    // re-announced, so the toggle has to carry its state.
+    it('reports the unpressed mode while reading', () => {
+        renderHeader();
+
+        expect(screen.getByRole('button', {name: 'Edit'})).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('reports the pressed mode while editing', () => {
+        renderHeader({editing: true});
+
+        expect(screen.getByRole('button', {name: 'Done'})).toHaveAttribute('aria-pressed', 'true');
+    });
+
     it('reports a click on the control', () => {
         const onToggleEdit = jest.fn();
         renderHeader({onToggleEdit});
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index ef3e39c..3ad0d8b 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -155,6 +155,11 @@ const PageHeader = ({space, page, treeOpen, editing, onTogglePages, onToggleEdit
                             size='sm'
                             className={classNames('docs-btn-neutral', styles.iconLabel)}
                             leadingIcon={editing ? <CheckIcon size={18}/> : <PencilOutlineIcon size={18}/>}
+
+                            // The control is a mode toggle, and a changed label on a
+                            // button that already holds focus is not reliably
+                            // re-announced.
+                            aria-pressed={editing}
                             onClick={onToggleEdit}
                         >
                             {editing ? (

From 2ae72bafe1422e48feaaa6a6b2a337a7b09c6de6 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Mon, 3 Aug 2026 22:02:54 -0500
Subject: [PATCH 35/68] test(docs): cover the Edit and Done directions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nothing exercised the branch that chooses between entering and leaving edit
mode: inverting it left the whole suite green. Hoisted it out of SpaceView as
`useTogglePageEditMode` — cheaper to test than a view that pulls in half a dozen
hooks — and covered both directions plus the no-page case.

Finding F4 from the final whole-branch review.
---
 .../src/components/space_view/space_view.tsx  | 15 ++-----
 webapp/src/hooks/navigation.test.tsx          | 40 ++++++++++++++++++-
 webapp/src/hooks/navigation.ts                | 21 ++++++++++
 3 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index 352c729..fdd4214 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useDocsNavigation} from 'hooks/navigation';
+import {useDocsNavigation, useTogglePageEditMode} from 'hooks/navigation';
 import {useDefaultPagePath} from 'hooks/pages';
 import {useAppSelector} from 'hooks/redux';
 import {useSpaceStats} from 'hooks/spaces';
@@ -32,7 +32,8 @@ import styles from './space_view.module.scss';
 // (hero) until a page is routed, at which point it shows that page instead.
 // Page bodies are a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
-    const {pageId, isEditing, paths, goToPage, goToEditPage} = useDocsNavigation();
+    const {pageId, isEditing, paths} = useDocsNavigation();
+    const toggleEdit = useTogglePageEditMode(space.id);
     const page = useAppSelector((state) => (pageId ? getPageInSpace(state, space.id, pageId) : undefined));
     const pagesLoaded = useAppSelector((state) => arePagesLoadedForSpace(state, space.id));
     const {pageCount, memberCount} = useSpaceStats(space.id);
@@ -44,16 +45,6 @@ const SpaceView = ({space}: {space: Space}) => {
     const toggleInfo = useCallback(() => setInfoView((view) => (view ? null : 'root')), []);
     const closeInfo = useCallback(() => setInfoView(null), []);
     const showMembers = useCallback(() => setInfoView('members'), []);
-    const toggleEdit = useCallback(() => {
-        if (!pageId) {
-            return;
-        }
-        if (isEditing) {
-            goToPage(space.id, pageId);
-        } else {
-            goToEditPage(space.id, pageId);
-        }
-    }, [isEditing, pageId, space.id, goToPage, goToEditPage]);
 
     // A space with a default page opens on that page; `<Redirect>` replaces the
     // space-home entry rather than pushing one.
diff --git a/webapp/src/hooks/navigation.test.tsx b/webapp/src/hooks/navigation.test.tsx
index fad887a..76876a8 100644
--- a/webapp/src/hooks/navigation.test.tsx
+++ b/webapp/src/hooks/navigation.test.tsx
@@ -4,7 +4,7 @@
 import {fireEvent, screen} from '@testing-library/react';
 import React from 'react';
 
-import {useDocsNavigation} from './navigation';
+import {useDocsNavigation, useTogglePageEditMode} from './navigation';
 
 import {renderWithContext} from '../../tests/react_testing_utils';
 
@@ -103,3 +103,41 @@ describe('useDocsNavigation goToEditPage', () => {
         expect(history.length).toBe(2);
     });
 });
+
+function ToggleProbe({spaceId}: {spaceId: string}) {
+    const toggleEdit = useTogglePageEditMode(spaceId);
+    return (
+        <button
+            data-testid='toggle-edit'
+            onClick={toggleEdit}
+        />
+    );
+}
+
+const toggleFrom = (route: string) => {
+    const {history} = renderWithContext(<ToggleProbe spaceId='space1'/>, {
+        route,
+        state: {currentTeam: {id: 't1', name: 'myteam'}},
+    });
+
+    fireEvent.click(screen.getByTestId('toggle-edit'));
+
+    return {history, url: history.location.pathname + history.location.search};
+};
+
+describe('useTogglePageEditMode', () => {
+    it('enters edit mode from a page URL', () => {
+        expect(toggleFrom('/myteam/spaces/space1/pageX').url).toBe('/myteam/spaces/space1/pageX?edit=1');
+    });
+
+    it('leaves edit mode from an edit URL', () => {
+        expect(toggleFrom('/myteam/spaces/space1/pageX?edit=1').url).toBe('/myteam/spaces/space1/pageX');
+    });
+
+    it('does nothing on a space URL, where no page is routed', () => {
+        const {history, url} = toggleFrom('/myteam/spaces/space1');
+
+        expect(url).toBe('/myteam/spaces/space1');
+        expect(history.length).toBe(1);
+    });
+});
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index 4184cf1..c29bb68 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -78,3 +78,24 @@ export function useDocsNavigation() {
         },
     };
 }
+
+/**
+ * Returns a handler that moves the routed page in and out of edit mode: into
+ * `?edit=1` while reading, back to the bare page path while editing. Both are
+ * pushes, so Back is an exit. A no-op when no page is routed, since there is
+ * nothing to edit.
+ */
+export function useTogglePageEditMode(spaceId: string) {
+    const {pageId, isEditing, goToPage, goToEditPage} = useDocsNavigation();
+
+    return useCallback(() => {
+        if (!pageId) {
+            return;
+        }
+        if (isEditing) {
+            goToPage(spaceId, pageId);
+        } else {
+            goToEditPage(spaceId, pageId);
+        }
+    }, [isEditing, pageId, spaceId, goToPage, goToEditPage]);
+}

From 08c4699c3ffcbf2b0e47a4d5784db4620a9e7ebb Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 10:10:40 -0500
Subject: [PATCH 36/68] feat(docs): make the spaces sidebar resizable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Applies the existing resize infra to the product sidebar, which was pinned at
264px: useSidebarWidth('spaces') for the persisted per-user width and the shared
ResizableDivider for the drag, so it gets the same snap-to-default, double-click
reset, and arrow-key resizing the pages sidebar already has.

The space view's Sidebar component is deliberately not reused — its open/close
slide and the width transition that comes with it don't apply here. Only the two
genuinely reusable pieces are, so no `resizing` class is needed: this box has no
width transition to suppress mid-drag.

Bounds are its own (220-420 rather than the pages sidebar's 200-480): it holds
team and space names rather than a page tree, so it needs less room to be useful
and less headroom before it crowds the content column.

Prompt: apply sidebar resizing (from the already-reusable infra) to the spaces
sidebar
---
 webapp/i18n/en.json                           |  1 +
 .../docs_root/docs_root.module.scss           |  4 +++-
 webapp/src/components/docs_root/docs_root.tsx | 24 ++++++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index eda1522..b2d271b 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -134,6 +134,7 @@
   "docs.sidebar.label": "Spaces",
   "docs.sidebar.nav.home": "Home",
   "docs.sidebar.resize": "Resize pages sidebar",
+  "docs.sidebar.resizeSpaces": "Resize spaces sidebar",
   "docs.sidebar.search.placeholder": "Find docs",
   "docs.sidebar.space.copyLink": "Copy link",
   "docs.sidebar.space.favorite": "Add to favorites",
diff --git a/webapp/src/components/docs_root/docs_root.module.scss b/webapp/src/components/docs_root/docs_root.module.scss
index d389cb2..55beb01 100644
--- a/webapp/src/components/docs_root/docs_root.module.scss
+++ b/webapp/src/components/docs_root/docs_root.module.scss
@@ -4,10 +4,12 @@
     height: 100%;
 }
 
+// Width is set inline from the persisted user width; the divider positions
+// itself against this box, so it has to establish the containing block.
 .sidebar {
+    position: relative;
     display: flex;
     flex-shrink: 0;
-    width: 264px;
     height: 100%;
 }
 
diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index 58fc4ae..901d680 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -3,24 +3,33 @@
 
 import {useBootstrapDocs} from 'hooks/bootstrap';
 import {useDocsNavigation} from 'hooks/navigation';
+import {useSidebarWidth} from 'hooks/sidebar_width';
 import {useRecordSpaceView} from 'hooks/spaces';
 import React, {useCallback, useState} from 'react';
 import {useHotkeys} from 'react-hotkeys-hook';
+import {useIntl} from 'react-intl';
 
 import CreateSpaceModal from 'components/create_space_modal/create_space_modal';
 import DocsSwitcher from 'components/docs_switcher/docs_switcher';
 import {DocsModalController, openDocsModal} from 'components/modals';
 import {Readout} from 'components/readout';
+import ResizableDivider from 'components/resizable_divider/resizable_divider';
 import SpacesSidebar from 'components/spaces_sidebar/spaces_sidebar';
 import {DocsToaster} from 'components/toast';
 
 import DocsMainContent from './docs_main_content';
 import styles from './docs_root.module.scss';
 
+const DEFAULT_SPACES_WIDTH = 264;
+const MIN_SPACES_WIDTH = 220;
+const MAX_SPACES_WIDTH = 420;
+
 const DocsRoot = () => {
     useBootstrapDocs();
 
+    const {formatMessage} = useIntl();
     const {spaceId} = useDocsNavigation();
+    const {width, setWidth, commitWidth} = useSidebarWidth('spaces', DEFAULT_SPACES_WIDTH);
 
     useRecordSpaceView(spaceId);
 
@@ -40,11 +49,24 @@ const DocsRoot = () => {
 
     return (
         <div className={styles.root}>
-            <div className={styles.sidebar}>
+            <div
+                className={styles.sidebar}
+                style={{width}}
+            >
                 <SpacesSidebar
                     onOpenSwitcher={openSwitcher}
                     onCreateSpace={openCreateSpace}
                 />
+                <ResizableDivider
+                    ariaLabel={formatMessage({id: 'docs.sidebar.resizeSpaces', defaultMessage: 'Resize spaces sidebar'})}
+                    side='left'
+                    width={width}
+                    minWidth={MIN_SPACES_WIDTH}
+                    maxWidth={MAX_SPACES_WIDTH}
+                    defaultWidth={DEFAULT_SPACES_WIDTH}
+                    onResize={setWidth}
+                    onResizeEnd={commitWidth}
+                />
             </div>
             <main className={styles.main}>
                 <DocsMainContent

From 3987266edd4550b3a7e3bac6ab08f627095fadcb Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 10:36:35 -0500
Subject: [PATCH 37/68] fix(docs): drop onto the space between page tree rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The drop target was registered on the row itself, while row spacing came from
`gap` on three containers (.tree, .node, .children). Those 8px bands belonged to
no drop target, so a drag crossing them fired no onDrag and a release there found
dropTargets[0] undefined and did nothing — which is why only the rows' own edges
appeared to work.

Spacing is now padding on a new hit wrapper around each row, so adjacent
hitboxes touch and every pixel of the tree belongs to exactly one row. Each row
carries half the spacing above and below, keeping every adjacent pair 8px apart;
the tree's negative block margin cancels the outermost rows' share so the panel's
outer spacing is unchanged.

The hitbox now includes the spacing, which is also what the reorder indicator
already assumed: it was passed gap='8px' to draw itself in the middle of a gap
the hitbox didn't cover. That offset is no longer needed — the wrapper's edge is
the middle of the visual gap.

Prompt: bug in page tree: while dragging an item over the gap (between items), it
doesn't register
---
 .../page_tree/page_tree_node.module.scss      |  19 ++-
 .../space_view/page_tree/page_tree_node.tsx   | 128 +++++++++---------
 .../page_tree/page_tree_panel.module.scss     |   7 +-
 3 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
index 46acfd8..ba5996e 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
@@ -3,19 +3,30 @@
 .node {
     display: flex;
     flex-direction: column;
-    gap: 8px;
     min-width: 0;
     outline: none;
 }
 
+// The row's drop hitbox. Row spacing is this element's padding rather than a
+// `gap` on the containers, so adjacent hitboxes touch and a drag crossing the
+// space between two rows is always inside one of them. With a gap, that space
+// belonged to no drop target and the drag registered nothing.
+//
+// Each row contributes half the spacing above and below, so any two adjacent
+// rows — siblings, or a parent and its first child — still sit 8px apart.
+.rowHit {
+    position: relative;
+    padding-block: 4px;
+}
+
 // Focus is on the node, but the ring belongs around the row — the node's box
 // spans the whole subtree.
-.node:focus-visible > .row {
+.node:focus-visible > .rowHit > .row {
     outline: 2px solid var(--button-bg);
     outline-offset: -2px;
 }
 
-.node:focus-visible > .row .menuTrigger {
+.node:focus-visible > .rowHit > .row .menuTrigger {
     opacity: 1;
 }
 
@@ -155,9 +166,9 @@
     opacity: 1;
 }
 
+// No gap: spacing comes from each row's `.rowHit` padding (see above).
 .children {
     display: flex;
     flex-direction: column;
-    gap: 8px;
     min-width: 0;
 }
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index cd60ab5..f659bb3 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -29,10 +29,6 @@ import styles from './page_tree_node.module.scss';
 
 const INDENT_STEP = 12;
 
-// Vertical spacing between rows. Shared with the tree's CSS gap so the reorder
-// indicator lands in the middle of the gap instead of against a row's edge.
-const ROW_GAP = '8px';
-
 type Props = {
     node: PageNode;
     activePageId?: string;
@@ -141,8 +137,9 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
         }
     };
 
-    // Two elements, two jobs: the row is the drag/drop target (its box is what the
-    // pointer hit-tests against), while the outer treeitem is what takes focus.
+    // Three elements, three jobs: the hit wrapper is the drag/drop target (its box
+    // includes the spacing around the row, so a drag between rows still lands in
+    // one), the row inside it is what's painted, and the outer treeitem takes focus.
     const setRowElement = (next: HTMLDivElement | null) => setElement(next);
 
     const setNodeElement = (next: HTMLDivElement | null) => registerRow(page.id, next);
@@ -184,75 +181,74 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
         >
             <div
                 ref={setRowElement}
-                className={classNames(styles.row, {
-                    [styles.active]: isActive,
-                    [styles.dragging]: dragging,
-                    [styles.reparent]: dropTarget?.mode === 'reparent',
-                    [styles.blocked]: blocked,
-                    [styles.invalidZone]: inDraggedSubtree,
-                })}
-                style={{marginInlineStart: depth * INDENT_STEP}}
-                onClick={onRowClick}
+                className={styles.rowHit}
             >
-                {hasChildren ? (
-                    <button
-                        type='button'
-                        className={styles.chevron}
-                        tabIndex={-1}
-                        aria-label={toggleLabel}
-                        aria-expanded={!isCollapsed}
-                        onClick={onChevronClick}
-                    >
-                        {isCollapsed ? <ChevronRightIcon size={16}/> : <ChevronDownIcon size={16}/>}
-                    </button>
-                ) : (
-                    <span
-                        className={styles.chevronSpacer}
-                        aria-hidden={true}
-                    />
-                )}
-                <span
-                    className={styles.icon}
-                    aria-hidden={true}
+                <div
+                    className={classNames(styles.row, {
+                        [styles.active]: isActive,
+                        [styles.dragging]: dragging,
+                        [styles.reparent]: dropTarget?.mode === 'reparent',
+                        [styles.blocked]: blocked,
+                        [styles.invalidZone]: inDraggedSubtree,
+                    })}
+                    style={{marginInlineStart: depth * INDENT_STEP}}
+                    onClick={onRowClick}
                 >
-                    <PageGlyph size={16}/>
-                </span>
-                {title}
-                {favorited && (
-                    <span
-                        className={styles.favorite}
-                        aria-label={favoriteLabel}
-                        role='img'
-                    >
-                        <StarIcon size={12}/>
-                    </span>
-                )}
-                <Spacer/>
-                <PageMenu
-                    spaceId={page.space_id}
-                    pageId={page.id}
-                    pageTitle={page.title}
-                    align='right'
-                    open={menuOpen}
-                    onOpenChange={setMenuOpen}
-                    trigger={(
+                    {hasChildren ? (
                         <button
                             type='button'
-                            className={styles.menuTrigger}
+                            className={styles.chevron}
                             tabIndex={-1}
-                            aria-label={menuLabel}
-                            onClick={(event) => event.stopPropagation()}
+                            aria-label={toggleLabel}
+                            aria-expanded={!isCollapsed}
+                            onClick={onChevronClick}
                         >
-                            <DotsHorizontalIcon size={16}/>
+                            {isCollapsed ? <ChevronRightIcon size={16}/> : <ChevronDownIcon size={16}/>}
                         </button>
+                    ) : (
+                        <span
+                            className={styles.chevronSpacer}
+                            aria-hidden={true}
+                        />
+                    )}
+                    <span
+                        className={styles.icon}
+                        aria-hidden={true}
+                    >
+                        <PageGlyph size={16}/>
+                    </span>
+                    {title}
+                    {favorited && (
+                        <span
+                            className={styles.favorite}
+                            aria-label={favoriteLabel}
+                            role='img'
+                        >
+                            <StarIcon size={12}/>
+                        </span>
                     )}
-                />
-                {dropTarget?.mode === 'reorder' && (
-                    <DropIndicator
-                        edge={dropTarget.edge}
-                        gap={ROW_GAP}
+                    <Spacer/>
+                    <PageMenu
+                        spaceId={page.space_id}
+                        pageId={page.id}
+                        pageTitle={page.title}
+                        align='right'
+                        open={menuOpen}
+                        onOpenChange={setMenuOpen}
+                        trigger={(
+                            <button
+                                type='button'
+                                className={styles.menuTrigger}
+                                tabIndex={-1}
+                                aria-label={menuLabel}
+                                onClick={(event) => event.stopPropagation()}
+                            >
+                                <DotsHorizontalIcon size={16}/>
+                            </button>
+                        )}
                     />
-                )}
+                </div>
+                {dropTarget?.mode === 'reorder' && <DropIndicator edge={dropTarget.edge}/>}
             </div>
             {previewContainer && createPortal(
                 <PageDragPreview
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
index 3b7cce3..b3af571 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.module.scss
@@ -10,10 +10,15 @@
     overflow-y: auto;
 }
 
+// No gap between root rows: each row carries its own vertical spacing as padding
+// on its drop hitbox, so the hitboxes stay contiguous for drag and drop. The
+// negative block margin cancels the outermost rows' share of that padding, which
+// has no neighbour to space against — without it the tree would grow 4px at each
+// end against the space-home item above and the add-page button below.
 .tree {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    margin-block: -4px;
 }
 
 // Available to screen readers only: the tree's key bindings and its move

From a35bd747ee7dfb6795a69de8866d5c23201773fb Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 10:47:22 -0500
Subject: [PATCH 38/68] fix(docs): make the last position at a level droppable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An expanded row's bottom edge claimed "after this item" while being drawn above
that item's own children, so the indicator pointed at one position and the drop
landed in another. For the last root item it was worse: that misleading band was
the only route to the last root position at all.

An expanded row no longer offers a bottom edge — its lower band becomes reparent
surface, so dragging low over it nests instead. The positions it used to conflate
are now separate and each reads the way it behaves: "first child" is the first
child's own top edge, which sits directly below the parent row; "last in this
group" is a new trailing strip after the group's last row.

The strip is rendered only where the ambiguity exists — when a group's last row
is expanded. A leaf or collapsed last row has nothing beneath it, so its bottom
edge is already truthful and sufficient. It also costs no layout: negative block
margins pull it over the padding its neighbours already reserve for spacing.

Prompt: the last item in the tree has children -- I don't have a natural way to
drop the item into the last (root) position
---
 .../space_view/page_tree/dnd/types.ts         | 12 ++++
 .../page_tree/dnd/use_append_drop.ts          | 62 +++++++++++++++++++
 .../page_tree/dnd/use_page_drag_drop.ts       | 20 ++++--
 .../space_view/page_tree/dnd/use_pages_dnd.ts | 19 +++++-
 .../page_tree_append_zone.module.scss         | 19 ++++++
 .../page_tree/page_tree_append_zone.tsx       | 44 +++++++++++++
 .../space_view/page_tree/page_tree_node.tsx   | 19 ++++++
 .../space_view/page_tree/page_tree_panel.tsx  | 20 +++++-
 8 files changed, 207 insertions(+), 8 deletions(-)
 create mode 100644 webapp/src/components/space_view/page_tree/dnd/use_append_drop.ts
 create mode 100644 webapp/src/components/space_view/page_tree/page_tree_append_zone.module.scss
 create mode 100644 webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx

diff --git a/webapp/src/components/space_view/page_tree/dnd/types.ts b/webapp/src/components/space_view/page_tree/dnd/types.ts
index eae77b5..87187ba 100644
--- a/webapp/src/components/space_view/page_tree/dnd/types.ts
+++ b/webapp/src/components/space_view/page_tree/dnd/types.ts
@@ -11,6 +11,18 @@ export type PageDropTarget =
     | {mode: 'reorder'; edge: Edge}
     | {mode: 'reparent'};
 
+// A group's trailing strip, which appends as the last item of that group. It has
+// no target row — the group's own parent is the target, and '' means the root
+// group — so it can express "last at this level", which a row edge cannot: an
+// expanded row's bottom edge sits above its children, not after them.
+export const PAGE_APPEND_TYPE = 'docs-page-append';
+
+export type PageAppendData = {
+    type: typeof PAGE_APPEND_TYPE;
+    parentId: string;
+    blocked: boolean;
+};
+
 export type PageDragData = {
     type: typeof PAGE_DRAG_TYPE;
     pageId: string;
diff --git a/webapp/src/components/space_view/page_tree/dnd/use_append_drop.ts b/webapp/src/components/space_view/page_tree/dnd/use_append_drop.ts
new file mode 100644
index 0000000..52cee69
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/dnd/use_append_drop.ts
@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {dropTargetForElements} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {useLatest} from 'hooks/utils';
+import {useEffect, useState} from 'react';
+
+import {PAGE_APPEND_TYPE, PAGE_DRAG_TYPE} from './types';
+
+type Args = {
+
+    // The group this strip appends into; '' is the root group.
+    parentId: string;
+    element: HTMLElement | null;
+
+    // True when `sourcePageId` may become the last child of `parentId` — guards
+    // the nesting cap and dropping a page into its own subtree. Read through a
+    // ref so a changing predicate doesn't re-register the listener.
+    canDrop: (sourcePageId: string) => boolean;
+    enabled: boolean;
+};
+
+/**
+ * A group's trailing drop strip. Registers the "append to this group" target and
+ * reports whether a drag is currently over it, so the caller can draw the
+ * indicator at the group's own indentation.
+ */
+export function useAppendDrop({parentId, element, canDrop, enabled}: Args) {
+    const [active, setActive] = useState(false);
+    const [blocked, setBlocked] = useState(false);
+    const canDropRef = useLatest(canDrop);
+
+    useEffect(() => {
+        if (!element || !enabled) {
+            return undefined;
+        }
+
+        return dropTargetForElements({
+            element,
+            getData: ({source}) => ({
+                type: PAGE_APPEND_TYPE,
+                parentId,
+                blocked: !canDropRef.current(source.data.pageId as string),
+            }),
+            canDrop: ({source}) => source.data.type === PAGE_DRAG_TYPE,
+            onDrag: ({self}) => {
+                setBlocked(Boolean(self.data.blocked));
+                setActive(!self.data.blocked);
+            },
+            onDragLeave: () => {
+                setActive(false);
+                setBlocked(false);
+            },
+            onDrop: () => {
+                setActive(false);
+                setBlocked(false);
+            },
+        });
+    }, [parentId, element, enabled, canDropRef]);
+
+    return {active, blocked};
+}
diff --git a/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts b/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
index 01c8d99..a0210ba 100644
--- a/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
+++ b/webapp/src/components/space_view/page_tree/dnd/use_page_drag_drop.ts
@@ -20,21 +20,31 @@ type Args = {
     // re-register the drag listeners.
     canDrop: (sourcePageId: string, mode: PageDropTarget['mode']) => boolean;
     enabled: boolean;
+
+    // True when this row's children are showing. Such a row has no bottom edge to
+    // offer: the pixels below it hold its children, so an indicator drawn there
+    // would sit above the very subtree the drop lands after. "Last in this group"
+    // is expressed by the group's trailing strip instead, and "first child" by the
+    // first child's own top edge.
+    expanded: boolean;
 };
 
 // A row's vertical hitbox: the top and bottom quarters reorder above/below the
 // row; the middle half reparents (drop onto center → become a child).
 const REORDER_BAND = 0.25;
 
-function computeDropTarget(element: Element, clientY: number): PageDropTarget {
+function computeDropTarget(element: Element, clientY: number, expanded: boolean): PageDropTarget {
     const rect = element.getBoundingClientRect();
     const ratio = (clientY - rect.top) / rect.height;
     if (ratio <= REORDER_BAND) {
         return {mode: 'reorder', edge: 'top'};
     }
-    if (ratio >= 1 - REORDER_BAND) {
+    if (!expanded && ratio >= 1 - REORDER_BAND) {
         return {mode: 'reorder', edge: 'bottom'};
     }
+
+    // An expanded row's bottom band becomes more reparent surface, so dragging low
+    // over it nests rather than doing nothing.
     return {mode: 'reparent'};
 }
 
@@ -42,7 +52,7 @@ function computeDropTarget(element: Element, clientY: number): PageDropTarget {
 // which is the row the drop indicator is describing.
 const PREVIEW_OFFSET = {x: '12px', y: '8px'};
 
-export function usePageDragDrop({pageId, element, canDrop, enabled}: Args) {
+export function usePageDragDrop({pageId, element, canDrop, enabled, expanded}: Args) {
     const [dragging, setDragging] = useState(false);
     const [dropTarget, setDropTarget] = useState<PageDropTarget | null>(null);
 
@@ -86,7 +96,7 @@ export function usePageDragDrop({pageId, element, canDrop, enabled}: Args) {
                 // travels with the data and suppresses both the indicator and the
                 // move itself (see `usePagesDnd`).
                 getData: ({input, element: el, source}) => {
-                    const target = computeDropTarget(el, input.clientY);
+                    const target = computeDropTarget(el, input.clientY, expanded);
                     return {
                         type: PAGE_DRAG_TYPE,
                         pageId,
@@ -123,7 +133,7 @@ export function usePageDragDrop({pageId, element, canDrop, enabled}: Args) {
                 },
             }),
         );
-    }, [pageId, element, enabled, canDropRef]);
+    }, [pageId, element, enabled, expanded, canDropRef]);
 
     return {dragging, dropTarget, blocked, previewContainer};
 }
diff --git a/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts b/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
index 63842c4..7426575 100644
--- a/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
+++ b/webapp/src/components/space_view/page_tree/dnd/use_pages_dnd.ts
@@ -7,7 +7,7 @@ import {useEffect, useState} from 'react';
 
 import type {Page} from 'types/docs';
 
-import {PAGE_DRAG_TYPE, type PageDropTarget} from './types';
+import {PAGE_APPEND_TYPE, PAGE_DRAG_TYPE, type PageDropTarget} from './types';
 
 type MoveArgs = {
     pageId: string;
@@ -70,11 +70,26 @@ export function usePagesDnd({pages, onMove, enabled}: Args) {
             setDraggingId(null);
 
             const target = location.current.dropTargets[0];
-            if (!target || target.data.type !== PAGE_DRAG_TYPE || target.data.blocked) {
+            if (!target || target.data.blocked) {
                 return;
             }
 
             const sourceId = source.data.pageId as string;
+
+            // A group's trailing strip appends into that group; it names a parent
+            // rather than a target row, so it resolves without one.
+            if (target.data.type === PAGE_APPEND_TYPE) {
+                const parentId = target.data.parentId as string;
+                const siblingIndex = pagesRef.current.
+                    filter((page) => page.parent_id === parentId && page.id !== sourceId).length;
+                onMoveRef.current({pageId: sourceId, parentId, siblingIndex});
+                return;
+            }
+
+            if (target.data.type !== PAGE_DRAG_TYPE) {
+                return;
+            }
+
             const targetId = target.data.pageId as string;
             const drop = {mode: target.data.mode, edge: target.data.edge} as PageDropTarget;
 
diff --git a/webapp/src/components/space_view/page_tree/page_tree_append_zone.module.scss b/webapp/src/components/space_view/page_tree/page_tree_append_zone.module.scss
new file mode 100644
index 0000000..62ce7e0
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_tree_append_zone.module.scss
@@ -0,0 +1,19 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// Invisible until a drag is over it, and free in layout: the negative block
+// margins pull it back over the padding its neighbours already reserve for
+// spacing, so inserting it moves nothing. It overlaps 4px of the last row's
+// bottom padding — which is reparent surface, since this strip only exists when
+// that row is expanded — and 4px of whatever follows.
+.zone {
+    position: relative;
+    height: 8px;
+    flex-shrink: 0;
+    margin-block: -4px;
+}
+
+.blocked {
+    border-radius: 2px;
+    box-shadow: inset 0 0 0 2px var(--error-text);
+}
diff --git a/webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx b/webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx
new file mode 100644
index 0000000..16f64e2
--- /dev/null
+++ b/webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {DropIndicator} from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import classNames from 'classnames';
+import React, {useState} from 'react';
+
+import {useAppendDrop} from './dnd/use_append_drop';
+import styles from './page_tree_append_zone.module.scss';
+
+type Props = {
+
+    // The group this strip appends into; '' is the root group.
+    parentId: string;
+
+    // Indentation of the group's own rows, so the indicator lines up with the
+    // items the drop would sit after rather than spanning the whole panel.
+    indent: number;
+    canDrop: (sourcePageId: string) => boolean;
+    enabled: boolean;
+};
+
+/**
+ * The strip after a group's last row. It exists because a row edge cannot express
+ * "last at this level": an expanded row's bottom edge is drawn above its own
+ * children, so it can only mean "after the subtree" while looking like "before the
+ * first child". This strip is the position that reads the way it behaves.
+ */
+const PageTreeAppendZone = ({parentId, indent, canDrop, enabled}: Props) => {
+    const [element, setElement] = useState<HTMLDivElement | null>(null);
+    const {active, blocked} = useAppendDrop({parentId, element, canDrop, enabled});
+
+    return (
+        <div
+            ref={setElement}
+            className={classNames(styles.zone, {[styles.blocked]: blocked})}
+            style={{marginInlineStart: indent}}
+        >
+            {active && <DropIndicator edge='top'/>}
+        </div>
+    );
+};
+
+export default PageTreeAppendZone;
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index f659bb3..46e87c1 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -25,6 +25,7 @@ import Spacer from 'components/spacer/spacer';
 import {MAX_PAGE_DEPTH} from './depth';
 import {usePageDragDrop} from './dnd/use_page_drag_drop';
 import PageDragPreview from './page_drag_preview';
+import PageTreeAppendZone from './page_tree_append_zone';
 import styles from './page_tree_node.module.scss';
 
 const INDENT_STEP = 12;
@@ -60,6 +61,13 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
     const hasChildren = children.length > 0;
     const isCollapsed = collapsed.has(page.id);
 
+    // A group only needs a trailing append strip when its last row is expanded:
+    // that row's own bottom edge would be drawn above its children while meaning
+    // "after them". Any other last row — a leaf, or a collapsed parent — has
+    // nothing below it, so its bottom edge already reads correctly.
+    const lastChild = children[children.length - 1];
+    const lastChildExpanded = Boolean(lastChild) && lastChild.children.length > 0 && !collapsed.has(lastChild.page.id);
+
     // A drag can never drop into its own subtree; those rows aren't drop targets
     // (truthful canDrop), so mark them as an invalid zone for the whole drag.
     const inDraggedSubtree = draggingId !== null && draggingId !== page.id && (descendants.get(draggingId)?.has(page.id) ?? false);
@@ -73,6 +81,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
         pageId: page.id,
         element,
         enabled: dndEnabled,
+        expanded: hasChildren && !isCollapsed,
         canDrop: (sourceId, mode) => {
             if (descendants.get(sourceId)?.has(page.id)) {
                 return false;
@@ -282,6 +291,16 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                             registerRow={registerRow}
                         />
                     ))}
+                    {lastChildExpanded && (
+                        <PageTreeAppendZone
+                            parentId={page.id}
+                            indent={(depth + 1) * INDENT_STEP}
+                            enabled={dndEnabled}
+                            canDrop={(sourceId) => !descendants.get(sourceId)?.has(page.id) &&
+                                sourceId !== page.id &&
+                                depth + 1 + (subtreeHeights.get(sourceId) ?? 0) <= MAX_PAGE_DEPTH}
+                        />
+                    )}
                 </div>
             )}
         </div>
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
index b369a39..686b0bb 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
@@ -20,10 +20,11 @@ import {toast} from 'components/toast';
 
 import type {Space} from 'types/docs';
 
-import {MAX_PAGE_LEVELS, buildSubtreeHeightMap} from './depth';
+import {MAX_PAGE_DEPTH, MAX_PAGE_LEVELS, buildSubtreeHeightMap} from './depth';
 import {usePagesDnd} from './dnd/use_pages_dnd';
 import {flattenVisibleRows, resolveReorder} from './keyboard';
 import type {ReorderIntent} from './keyboard';
+import PageTreeAppendZone from './page_tree_append_zone';
 import PageTreeNode from './page_tree_node';
 import styles from './page_tree_panel.module.scss';
 import SpaceHomeItem from './space_home_item';
@@ -50,6 +51,11 @@ const PageTreePanel = ({space}: {space: Space}) => {
     const subtreeHeights = useMemo(() => buildSubtreeHeightMap(roots), [roots]);
     const visibleRows = useMemo(() => flattenVisibleRows(roots, collapsed), [roots, collapsed]);
 
+    // See the trailing append strip below: the root group needs one only when its
+    // last row is expanded, and so has children rendered beneath its bottom edge.
+    const lastRoot = roots[roots.length - 1];
+    const lastRootExpanded = Boolean(lastRoot) && lastRoot.children.length > 0 && !collapsed.has(lastRoot.page.id);
+
     // The tree is a single tab stop (roving tabindex), so it tracks which row owns
     // it. Focus itself moves imperatively through the registry below rather than
     // through a prop, so an arrow key re-renders two rows instead of the tree.
@@ -270,6 +276,18 @@ const PageTreePanel = ({space}: {space: Space}) => {
                         registerRow={registerRow}
                     />
                 ))}
+                {/* Only when the last root is expanded: otherwise its own bottom
+                    edge already means "last at root" and is drawn in the right
+                    place. Appending at root puts the moved page at depth 0, so
+                    only its own subtree has to fit under the cap. */}
+                {lastRootExpanded && (
+                    <PageTreeAppendZone
+                        parentId=''
+                        indent={0}
+                        enabled={true}
+                        canDrop={(sourceId) => (subtreeHeights.get(sourceId) ?? 0) <= MAX_PAGE_DEPTH}
+                    />
+                )}
             </div>
 
             <p

From fd6e13e1abc6c7bf9f0f1c0cb4c7794154a1cf9e Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 11:08:47 -0500
Subject: [PATCH 39/68] fix(docs): quiet tooltips and indent the drop indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two things that made a drag harder to aim than it needed to be.

Title tooltips are suppressed for the whole tree while a drag is in flight, not
just on the dragged row: the pointer is crossing rows to reach a drop position,
and a tooltip opening over the drop indicator covers the thing being aimed with.

The reorder indicator now starts at the destination's indentation instead of
spanning the panel. It's drawn inside the row's hit wrapper, which is full width
by design, but the page lands as a sibling of that row — so the line begins where
those rows begin. DropIndicator takes an `indent` for exactly this.

The group append strip gets the same treatment, moved from an indented box to a
full-width box with an indented line: the target stays easy to hit at any depth
while the line still shows the level the page would land at.

Prompt: when dragging a tree item, its tooltip should not appear; the drop
indicator is always full width, it should instead match the destination/reparent
indentation level
---
 .../page_tree/page_tree_append_zone.tsx          | 10 ++++++++--
 .../space_view/page_tree/page_tree_node.tsx      | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx b/webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx
index 16f64e2..2fc5a43 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_append_zone.tsx
@@ -34,9 +34,15 @@ const PageTreeAppendZone = ({parentId, indent, canDrop, enabled}: Props) => {
         <div
             ref={setElement}
             className={classNames(styles.zone, {[styles.blocked]: blocked})}
-            style={{marginInlineStart: indent}}
         >
-            {active && <DropIndicator edge='top'/>}
+            {/* The strip stays full width so it's easy to hit at any depth; only
+                the line is indented, to the level the page would land at. */}
+            {active && (
+                <DropIndicator
+                    edge='top'
+                    indent={`${indent}px`}
+                />
+            )}
         </div>
     );
 };
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index 46e87c1..dab2a5d 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -156,11 +156,13 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
     const PageGlyph = page.type === 'page_folder' ? FolderOutlineIcon : FileTextOutlineIcon;
 
     // Only a clipped title gets a tooltip; a fully visible one would just repeat
-    // the text under the pointer.
+    // the text under the pointer. Suppressed for the whole tree during a drag: the
+    // pointer is crossing rows to aim at a drop position, and a tooltip popping up
+    // over the drop indicator hides the thing the user is aiming with.
     const title = (
         <WithTooltip
             title={page.title}
-            disabled={!titleOverflowing}
+            disabled={!titleOverflowing || draggingId !== null}
         >
             <span
                 ref={titleRef}
@@ -257,7 +259,15 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                         )}
                     />
                 </div>
-                {dropTarget?.mode === 'reorder' && <DropIndicator edge={dropTarget.edge}/>}
+                {/* Indented to the destination's level: the line spans the hit
+                    wrapper, which is full width, but the page would land as this
+                    row's sibling — so the line starts where those rows start. */}
+                {dropTarget?.mode === 'reorder' && (
+                    <DropIndicator
+                        edge={dropTarget.edge}
+                        indent={`${depth * INDENT_STEP}px`}
+                    />
+                )}
             </div>
             {previewContainer && createPortal(
                 <PageDragPreview

From 5fdaccc873b6541adb47f985e1a8abd8353d9098 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 11:19:58 -0500
Subject: [PATCH 40/68] fix(docs): layer stacked modals instead of overlapping
 them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stack assumed Base UI handled nesting. It doesn't here: a Dialog.Root is
nested only when it renders inside another one's React subtree
(DialogRoot: `nested = Boolean(useDialogRootContext(true))`), and the controller
renders the stack as siblings — so Base UI saw unrelated dialogs and never
applied `data-nested-dialog-open` or `--nested-dialogs`.

With every modal sharing one `--z-index-modal`, paint order fell to whichever
portal mounted first, so a modal opened from another could land beneath it and its
backdrop was neither visible nor clickable. Depth is now explicit: the controller
knows the stack, so it supplies each modal's level and how many sit on top of it,
and each level paints in a two-slot band — its backdrop, then its popup.

Also gives the stack the layered feel it was missing. A covered modal scales back
slightly and fades, so opening one from another reads as a stack rather than a
replacement, and stops taking clicks so a lower popup is never under the pointer.
Only the topmost backdrop dims: two 50% blacks compound toward black, so lower
ones stay mounted for dismissal but paint nothing.

Corrects the store's doc comment, which asserted the behaviour that wasn't there.

Prompt: the modals layering is not right -- Space Settings then Archive space --
the archive modal doesn't appear to have a clickable or visible backdrop, and
Space Settings doesn't appear to go down a level
---
 .../generic_modal/generic_modal.module.scss   | 35 +++++++++++--
 .../generic_modal/generic_modal.tsx           | 25 ++++++++--
 .../modals/docs_modal_controller.test.tsx     | 50 ++++++++++++++++++-
 .../modals/docs_modal_controller.tsx          | 35 +++++++++++--
 webapp/src/components/modals/index.ts         |  3 +-
 webapp/src/components/modals/modal_store.ts   | 10 ++--
 6 files changed, 140 insertions(+), 18 deletions(-)

diff --git a/webapp/src/components/generic_modal/generic_modal.module.scss b/webapp/src/components/generic_modal/generic_modal.module.scss
index 7a70ed7..37dea24 100644
--- a/webapp/src/components/generic_modal/generic_modal.module.scss
+++ b/webapp/src/components/generic_modal/generic_modal.module.scss
@@ -1,13 +1,20 @@
+// Each stacked modal gets a two-slot band of its own — backdrop, then popup —
+// starting from the app's modal layer. Depth comes from `--docs-modal-level`,
+// set by the modal stack (see components/modals). Without it every modal shared
+// one z-index and the order fell to whichever portal mounted first, which is why
+// a modal opened from another could end up under it.
+@function layer($slot) {
+    @return calc(var(--z-index-modal) + (var(--docs-modal-level, 0) * 2) + $slot);
+}
+
 // Base UI's Dialog has no positioner, so the consumer positions the popup. This
 // full-viewport flex container centers it and is click-through
 // (pointer-events: none) so clicks on the dimmed area reach the backdrop to
-// dismiss. This and the backdrop sit in the app's modal layer so they cover
-// fixed chrome like the global header; within that layer the popup still paints
-// above the backdrop by DOM order.
+// dismiss. It sits above its own backdrop and below the next level's.
 .viewport {
     position: fixed;
     inset: 0;
-    z-index: var(--z-index-modal);
+    z-index: layer(1);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -26,15 +33,33 @@
     background: var(--center-channel-bg);
     box-shadow: 0 20px 32px rgba(0, 0, 0, 0.12);
     pointer-events: auto;
+    transition: transform 150ms ease, opacity 150ms ease;
+}
+
+// Something opened on top of this one: sink it back a step so the stack reads as
+// layers rather than as one modal replacing another, and stop it taking clicks —
+// the covering backdrop already intercepts them, but a lower popup should never
+// be the thing under the pointer.
+.modalCovered {
+    transform: scale(0.96) translateY(-8px);
+    opacity: 0.6;
+    pointer-events: none;
 }
 
 .backdrop {
     position: fixed;
     inset: 0;
-    z-index: var(--z-index-modal);
+    z-index: layer(0);
     background: rgba(0, 0, 0, 0.5);
 }
 
+// Only the topmost backdrop dims. Stacked 50% blacks would compound toward black
+// (two reads as 75%), so lower ones stay mounted — Base UI dismisses through
+// them — but paint nothing.
+.backdropCovered {
+    background: transparent;
+}
+
 .header {
     display: flex;
     flex: 0 0 auto;
diff --git a/webapp/src/components/generic_modal/generic_modal.tsx b/webapp/src/components/generic_modal/generic_modal.tsx
index ace6fba..38b2e60 100644
--- a/webapp/src/components/generic_modal/generic_modal.tsx
+++ b/webapp/src/components/generic_modal/generic_modal.tsx
@@ -9,6 +9,8 @@ import {useIntl} from 'react-intl';
 import CloseIcon from '@mattermost/compass-icons/components/close';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 
+import {useDocsModalLayer} from 'components/modals';
+
 import styles from './generic_modal.module.scss';
 
 type Props = {
@@ -40,6 +42,13 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
     const {formatMessage} = useIntl();
     const closeLabel = formatMessage({id: 'docs.genericModal.close', defaultMessage: 'Close'});
 
+    // Each stack level paints in its own band so the order never depends on which
+    // portal happened to mount first: two per level, the backdrop then the popup
+    // above it. A covered modal recedes and stops taking clicks.
+    const {level, covered} = useDocsModalLayer();
+    const layerStyle = {'--docs-modal-level': level} as React.CSSProperties;
+    const isCovered = covered > 0;
+
     return (
         <Dialog.Root
             open={true}
@@ -50,14 +59,20 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
             }}
         >
             <Dialog.Portal>
-                <Dialog.Backdrop className={styles.backdrop}/>
+                <Dialog.Backdrop
+                    className={classNames(styles.backdrop, {[styles.backdropCovered]: isCovered})}
+                    style={layerStyle}
+                />
 
                 {/* Flex centering container rendered after the backdrop, so the
-                    popup paints above it by DOM order — no z-index needed, and
-                    no centering transform on the popup itself. */}
-                <div className={styles.viewport}>
+                    popup paints above it within this level's band — and no
+                    centering transform on the popup itself. */}
+                <div
+                    className={styles.viewport}
+                    style={layerStyle}
+                >
                     <Dialog.Popup
-                        className={classNames(styles.modal, className)}
+                        className={classNames(styles.modal, {[styles.modalCovered]: isCovered}, className)}
                         initialFocus={initialFocus}
                         aria-label={ariaLabel}
                     >
diff --git a/webapp/src/components/modals/docs_modal_controller.test.tsx b/webapp/src/components/modals/docs_modal_controller.test.tsx
index 9bb99e2..cb3684b 100644
--- a/webapp/src/components/modals/docs_modal_controller.test.tsx
+++ b/webapp/src/components/modals/docs_modal_controller.test.tsx
@@ -4,7 +4,7 @@
 import {act, screen} from '@testing-library/react';
 import React from 'react';
 
-import DocsModalController, {useDocsModal} from './docs_modal_controller';
+import DocsModalController, {useDocsModal, useDocsModalLayer} from './docs_modal_controller';
 import {closeAllDocsModals, openDocsModal} from './modal_store';
 
 import {renderWithContext} from '../../../tests/react_testing_utils';
@@ -56,6 +56,54 @@ describe('DocsModalController', () => {
         expect(screen.queryByText('Inner')).not.toBeInTheDocument();
     });
 
+    describe('layering', () => {
+        const Layer = ({name}: {name: string}) => {
+            const {level, covered} = useDocsModalLayer();
+            return <div>{`${name}: level ${level}, covered ${covered}`}</div>;
+        };
+
+        it('gives each stacked modal its own level, deepest first', () => {
+            renderWithContext(<DocsModalController/>);
+
+            act(() => {
+                openDocsModal(<Layer name='Settings'/>);
+            });
+            act(() => {
+                openDocsModal(<Layer name='Archive'/>);
+            });
+
+            expect(screen.getByText('Settings: level 0, covered 1')).toBeInTheDocument();
+            expect(screen.getByText('Archive: level 1, covered 0')).toBeInTheDocument();
+        });
+
+        it('uncovers the modal below when the one above it closes', () => {
+            renderWithContext(<DocsModalController/>);
+
+            act(() => {
+                openDocsModal(<Layer name='Settings'/>);
+            });
+
+            let archive = {id: '', close: () => {}};
+            act(() => {
+                archive = openDocsModal(<Layer name='Archive'/>);
+            });
+
+            expect(screen.getByText('Settings: level 0, covered 1')).toBeInTheDocument();
+
+            act(() => {
+                archive.close();
+            });
+
+            expect(screen.getByText('Settings: level 0, covered 0')).toBeInTheDocument();
+        });
+
+        it('reports a lone modal as uncovered, so a dialog outside the stack is unaffected', () => {
+            renderWithContext(<Layer name='Standalone'/>);
+
+            expect(screen.getByText('Standalone: level 0, covered 0')).toBeInTheDocument();
+        });
+    });
+
     it('passes the handle to a render function and exposes it through context', () => {
         const Content = () => {
             const handle = useDocsModal();
diff --git a/webapp/src/components/modals/docs_modal_controller.tsx b/webapp/src/components/modals/docs_modal_controller.tsx
index 38d951a..405e0c9 100644
--- a/webapp/src/components/modals/docs_modal_controller.tsx
+++ b/webapp/src/components/modals/docs_modal_controller.tsx
@@ -11,13 +11,41 @@ const DocsModalContext = createContext<DocsModalHandle | undefined>(undefined);
 /** The handle of the modal the calling component is rendered inside, if any. */
 export const useDocsModal = () => useContext(DocsModalContext);
 
+export type DocsModalLayer = {
+
+    /** 0-based position in the stack, so each level can own a paint order. */
+    level: number;
+
+    /** How many modals are stacked on top of this one. */
+    covered: number;
+};
+
+const NOT_STACKED: DocsModalLayer = {level: 0, covered: 0};
+
+// Base UI decides whether a dialog is nested from React context — a `Dialog.Root`
+// is nested only when it renders inside another one's subtree (see
+// DialogRoot: `nested = Boolean(useDialogRootContext(true))`). This controller
+// renders the stack as siblings, so Base UI sees unrelated dialogs and never
+// applies its own nesting treatment (`data-nested-dialog-open`,
+// `--nested-dialogs`). The stack is what knows the depth, so it supplies it.
+const DocsModalLayerContext = createContext<DocsModalLayer>(NOT_STACKED);
+
+/**
+ * This modal's place in the stack. Defaults to a lone top-level modal, so a
+ * dialog rendered outside the stack behaves as it always did.
+ */
+export const useDocsModalLayer = () => useContext(DocsModalLayerContext);
+
 type EntryProps = {
     entry: DocsModalEntry;
+    layer: DocsModalLayer;
 };
 
-const DocsModalEntryMount = ({entry}: EntryProps) => (
+const DocsModalEntryMount = ({entry, layer}: EntryProps) => (
     <DocsModalContext.Provider value={entry.handle}>
-        {entry.render(entry.handle)}
+        <DocsModalLayerContext.Provider value={layer}>
+            {entry.render(entry.handle)}
+        </DocsModalLayerContext.Provider>
     </DocsModalContext.Provider>
 );
 
@@ -30,10 +58,11 @@ const DocsModalController = () => {
 
     return (
         <>
-            {stack.map((entry) => (
+            {stack.map((entry, index) => (
                 <DocsModalEntryMount
                     key={entry.handle.id}
                     entry={entry}
+                    layer={{level: index, covered: stack.length - 1 - index}}
                 />
             ))}
         </>
diff --git a/webapp/src/components/modals/index.ts b/webapp/src/components/modals/index.ts
index 1c2cab1..4ed357f 100644
--- a/webapp/src/components/modals/index.ts
+++ b/webapp/src/components/modals/index.ts
@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-export {default as DocsModalController, useDocsModal} from './docs_modal_controller';
+export {default as DocsModalController, useDocsModal, useDocsModalLayer} from './docs_modal_controller';
+export type {DocsModalLayer} from './docs_modal_controller';
 export {closeAllDocsModals, closeDocsModal, openDocsModal} from './modal_store';
 export type {DocsModalHandle, DocsModalRender} from './modal_store';
 export {useDocsModals} from './use_docs_modals';
diff --git a/webapp/src/components/modals/modal_store.ts b/webapp/src/components/modals/modal_store.ts
index f452761..b78c8d9 100644
--- a/webapp/src/components/modals/modal_store.ts
+++ b/webapp/src/components/modals/modal_store.ts
@@ -46,9 +46,13 @@ export const closeDocsModal = (id: string) => {
  * within an open modal stacks on top of it, to any depth.
  *
  * The content owns its own dialog surface (e.g. `GenericModal`/`ConfirmModal`,
- * both Base UI `Dialog`-based), so nesting, focus management and backdrops are
- * handled by Base UI's dialog stacking rather than duplicated here. Pass a
- * render function to receive the handle (wire its `close` to the content's
+ * both Base UI `Dialog`-based), which handles focus management and dismissal.
+ * Layering is this stack's job, not Base UI's: Base UI treats a dialog as nested
+ * only when its `Dialog.Root` renders inside another one's React subtree, and
+ * these are siblings, so it sees unrelated dialogs. The depth each level paints
+ * at comes from `useDocsModalLayer` (see `docs_modal_controller`).
+ *
+ * Pass a render function to receive the handle (wire its `close` to the content's
  * `onClose`), or a ready-made element when the content closes itself.
  *
  * @returns a handle whose `close()` pops this modal off the stack.

From eeabecfd92fd5ab429f71dcf8a2b426b42f41c5b Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 11:36:12 -0500
Subject: [PATCH 41/68] fix(docs): layer a modal opened from inside another
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Not an off-by-one: the previous commit's level and covered values were right, but
they only describe the modal stack, and these confirms never enter it. Space
Settings renders them in its own JSX — deliberately, per the comment there — so
they stack through Base UI's nesting instead, and nothing was reading that.

Two consequences, both fixed here:

Base UI renders no backdrop at all for a nested dialog (DialogBackdrop:
`enabled: forceRender || !nested`), which is why the archive confirm had nothing
visible to dim with or click away on. forceRender turns it back on, at a lower
alpha since the modal below is already dimming the app — full strength would
compound toward black with every level.

Base UI marks the covering popup with `data-nested-dialog-open` rather than
telling the child anything, so the recede now keys off that as well as the stack's
own signal. Both routes to stacking get the same treatment.

Depth is the sum of both: a nesting count from React context alongside the stack
level, so either route lands the dialog in the right paint band.

Base UI already hid the covered dialog from the accessibility tree — its title has
no queryable role while covered — so only the visual half was ever missing.

Prompt: is there an off-by-1 issue going on? still not seeing space settings go
down a level (or archive space go up a level)
---
 .../generic_modal/generic_modal.module.scss   | 15 +++++-
 .../generic_modal/generic_modal.test.tsx      | 54 +++++++++++++++++++
 .../generic_modal/generic_modal.tsx           | 38 +++++++++----
 3 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/generic_modal/generic_modal.module.scss b/webapp/src/components/generic_modal/generic_modal.module.scss
index 37dea24..f61af4d 100644
--- a/webapp/src/components/generic_modal/generic_modal.module.scss
+++ b/webapp/src/components/generic_modal/generic_modal.module.scss
@@ -40,7 +40,13 @@
 // layers rather than as one modal replacing another, and stop it taking clicks —
 // the covering backdrop already intercepts them, but a lower popup should never
 // be the thing under the pointer.
-.modalCovered {
+//
+// Two selectors because there are two ways to stack. `.modalCovered` is the modal
+// stack's own signal. `[data-nested-dialog-open]` is Base UI's, set on a popup
+// that has a dialog open inside its React tree — which is how a modal rendered in
+// another's JSX stacks, and which nothing was reading before.
+.modalCovered,
+.modal[data-nested-dialog-open] {
     transform: scale(0.96) translateY(-8px);
     opacity: 0.6;
     pointer-events: none;
@@ -60,6 +66,13 @@
     background: transparent;
 }
 
+// A nested modal's backdrop is additive: the modal below it is already dimming the
+// app, so this only has to separate the two layers. Full strength here would
+// compound toward black with every level.
+.backdropNested {
+    background: rgba(0, 0, 0, 0.24);
+}
+
 .header {
     display: flex;
     flex: 0 0 auto;
diff --git a/webapp/src/components/generic_modal/generic_modal.test.tsx b/webapp/src/components/generic_modal/generic_modal.test.tsx
index 80e6dc6..26633b5 100644
--- a/webapp/src/components/generic_modal/generic_modal.test.tsx
+++ b/webapp/src/components/generic_modal/generic_modal.test.tsx
@@ -56,4 +56,58 @@ describe('GenericModal', () => {
 
         expect(screen.queryByRole('button', {name: 'Close'})).not.toBeInTheDocument();
     });
+
+    // A modal rendered inside another's JSX stacks through Base UI's nesting
+    // rather than through the modal stack. Base UI renders no backdrop for a
+    // nested dialog unless forced, and marks the outer popup instead — so both
+    // halves are pinned here.
+    describe('a modal opened from inside another', () => {
+        const renderNested = () => renderWithContext(
+            <GenericModal
+                {...baseProps}
+                title='Outer'
+            >
+                <GenericModal
+                    {...baseProps}
+                    title='Inner'
+                >
+                    <p>{'Inner body'}</p>
+                </GenericModal>
+            </GenericModal>,
+        );
+
+        // Base UI hides a covered dialog from the accessibility tree, so the outer
+        // title is present in the DOM but has no `heading` role to query.
+        it('renders both dialogs', () => {
+            renderNested();
+
+            expect(screen.getByText('Outer')).toBeInTheDocument();
+            expect(screen.getByText('Inner')).toBeInTheDocument();
+            expect(screen.getByRole('heading', {name: 'Inner'})).toBeInTheDocument();
+        });
+
+        it('marks the outer popup as covered, so it can recede', () => {
+            renderNested();
+
+            const covered = document.querySelectorAll('[data-nested-dialog-open]');
+
+            // Only the outer popup is marked, and it holds only its own content —
+            // the inner dialog is portaled to the body rather than nested in the
+            // outer popup's DOM, even though it nests in the React tree.
+            expect(covered).toHaveLength(1);
+            expect(covered[0].textContent).toContain('Outer');
+            expect(covered[0].textContent).not.toContain('Inner body');
+        });
+
+        it('paints each dialog in its own band, innermost highest', () => {
+            renderNested();
+
+            // Both the backdrop and the viewport of each dialog carry the level, in
+            // portal order: outer pair first, then inner.
+            const levels = [...document.querySelectorAll('[style*="--docs-modal-level"]')].
+                map((el) => (el as HTMLElement).style.getPropertyValue('--docs-modal-level'));
+
+            expect(levels).toEqual(['0', '0', '1', '1']);
+        });
+    });
 });
diff --git a/webapp/src/components/generic_modal/generic_modal.tsx b/webapp/src/components/generic_modal/generic_modal.tsx
index 38b2e60..ea4fafb 100644
--- a/webapp/src/components/generic_modal/generic_modal.tsx
+++ b/webapp/src/components/generic_modal/generic_modal.tsx
@@ -3,7 +3,7 @@
 
 import {Dialog} from '@base-ui-components/react/dialog';
 import classNames from 'classnames';
-import React from 'react';
+import React, {createContext, useContext} from 'react';
 import {useIntl} from 'react-intl';
 
 import CloseIcon from '@mattermost/compass-icons/components/close';
@@ -13,6 +13,12 @@ import {useDocsModalLayer} from 'components/modals';
 
 import styles from './generic_modal.module.scss';
 
+// How many modals this one is rendered inside. A modal opened by rendering it in
+// another's JSX (rather than through `openDocsModal`) stacks through Base UI's
+// nesting instead of through the stack, so it needs its own count to land in the
+// right paint band — Base UI's own nesting context isn't exported.
+const ModalNestingContext = createContext(0);
+
 type Props = {
     onClose: () => void;
     title: React.ReactNode;
@@ -42,11 +48,14 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
     const {formatMessage} = useIntl();
     const closeLabel = formatMessage({id: 'docs.genericModal.close', defaultMessage: 'Close'});
 
-    // Each stack level paints in its own band so the order never depends on which
-    // portal happened to mount first: two per level, the backdrop then the popup
-    // above it. A covered modal recedes and stops taking clicks.
-    const {level, covered} = useDocsModalLayer();
-    const layerStyle = {'--docs-modal-level': level} as React.CSSProperties;
+    // Each level paints in its own band so the order never depends on which portal
+    // happened to mount first: two slots per level, the backdrop then the popup
+    // above it. A modal can be stacked two ways — pushed onto the modal stack, or
+    // rendered inside another modal's JSX — and depth is the sum, since either
+    // route puts one dialog above another.
+    const {level: stackLevel, covered} = useDocsModalLayer();
+    const nesting = useContext(ModalNestingContext);
+    const layerStyle = {'--docs-modal-level': stackLevel + nesting} as React.CSSProperties;
     const isCovered = covered > 0;
 
     return (
@@ -59,8 +68,17 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
             }}
         >
             <Dialog.Portal>
+                {/* forceRender because Base UI renders no backdrop for a nested
+                    dialog by default (DialogBackdrop: `enabled: forceRender ||
+                    !nested`), which left a modal opened from inside another with
+                    nothing to dim or click away on. Its alpha is reduced instead,
+                    since the modal below already dims the app. */}
                 <Dialog.Backdrop
-                    className={classNames(styles.backdrop, {[styles.backdropCovered]: isCovered})}
+                    forceRender={true}
+                    className={classNames(styles.backdrop, {
+                        [styles.backdropNested]: nesting > 0,
+                        [styles.backdropCovered]: isCovered,
+                    })}
                     style={layerStyle}
                 />
 
@@ -100,8 +118,10 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
                             </div>
                             {headerContent}
                         </div>
-                        {children}
-                        {footer && <div className={classNames(styles.footer, {[styles.footerDivider]: footerDivider})}>{footer}</div>}
+                        <ModalNestingContext.Provider value={nesting + 1}>
+                            {children}
+                            {footer && <div className={classNames(styles.footer, {[styles.footerDivider]: footerDivider})}>{footer}</div>}
+                        </ModalNestingContext.Provider>
                     </Dialog.Popup>
                 </div>
             </Dialog.Portal>

From 01fff6a2f5f482ea2fda48ef0bcc5ac3c7371075 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 11:42:33 -0500
Subject: [PATCH 42/68] style(docs): keep covered modals opaque and animate
 modals in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A modal behind another is a solid sheet that moved back, not a translucent one, so
the covered state no longer fades the surface. The dimming was always available
from the covering modal's backdrop, which paints above the covered popup's band —
fading the popup as well doubled it and let the app show through a modal. Only
backdrops carry transparency now, and the nested one goes to 0.32 since it is the
whole layering cue rather than half of it.

Modals also transition in, through the attributes Base UI puts on the popup and
backdrop while they transition. Same duration, easing and scale as the receding
step, rising from the opposite direction, so opening a modal and sinking one behind
another read as one motion instead of two effects. The fade there is about a
surface that hasn't arrived yet; once it has, it stays opaque however deep it goes.

`.backdropCovered` is declared after `.backdropNested` on purpose: a backdrop can
be both, they have equal specificity, and transparent has to win.

Known gap: only the entrance animates. Closing removes the modal from the stack,
which unmounts it immediately, so Base UI never gets to run the exit — the
data-ending-style rules are styled but effectively unused until the stack keeps
entries mounted until their transition completes.

Prompt: layered modals should not become transparent, only the backdrops should
add visual layering with transparency; all modals should have a transition-in
effect to match the modal-layering transition
---
 .../generic_modal/generic_modal.module.scss   | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/generic_modal/generic_modal.module.scss b/webapp/src/components/generic_modal/generic_modal.module.scss
index f61af4d..7f84700 100644
--- a/webapp/src/components/generic_modal/generic_modal.module.scss
+++ b/webapp/src/components/generic_modal/generic_modal.module.scss
@@ -36,6 +36,19 @@
     transition: transform 150ms ease, opacity 150ms ease;
 }
 
+// Arriving and leaving, via the attributes Base UI puts on the popup while it
+// transitions. Deliberately the same duration, easing and scale as the receding
+// step below, and rising from the opposite direction, so opening a modal and
+// sinking one behind another read as the same motion rather than two effects.
+//
+// The fade here is about a surface that isn't there yet; a modal that has arrived
+// stays fully opaque even once something covers it.
+.modal[data-starting-style],
+.modal[data-ending-style] {
+    transform: scale(0.96) translateY(8px);
+    opacity: 0;
+}
+
 // Something opened on top of this one: sink it back a step so the stack reads as
 // layers rather than as one modal replacing another, and stop it taking clicks —
 // the covering backdrop already intercepts them, but a lower popup should never
@@ -45,10 +58,13 @@
 // stack's own signal. `[data-nested-dialog-open]` is Base UI's, set on a popup
 // that has a dialog open inside its React tree — which is how a modal rendered in
 // another's JSX stacks, and which nothing was reading before.
+// The surface stays fully opaque — it's a solid sheet of paper that moved back, not
+// a translucent one. The dimming comes from the covering modal's backdrop, which
+// paints above this popup's band; fading the popup too would double the effect and
+// let the app show through a modal.
 .modalCovered,
 .modal[data-nested-dialog-open] {
     transform: scale(0.96) translateY(-8px);
-    opacity: 0.6;
     pointer-events: none;
 }
 
@@ -57,20 +73,29 @@
     inset: 0;
     z-index: layer(0);
     background: rgba(0, 0, 0, 0.5);
+    transition: opacity 150ms ease;
 }
 
-// Only the topmost backdrop dims. Stacked 50% blacks would compound toward black
-// (two reads as 75%), so lower ones stay mounted — Base UI dismisses through
-// them — but paint nothing.
-.backdropCovered {
-    background: transparent;
+// The dim arrives with the surface rather than snapping in behind it.
+.backdrop[data-starting-style],
+.backdrop[data-ending-style] {
+    opacity: 0;
 }
 
 // A nested modal's backdrop is additive: the modal below it is already dimming the
-// app, so this only has to separate the two layers. Full strength here would
-// compound toward black with every level.
+// app, so this one's job is to dim that modal — it is the whole layering cue now
+// that the covered surface stays opaque. Kept well below full strength so levels
+// don't compound toward black.
 .backdropNested {
-    background: rgba(0, 0, 0, 0.24);
+    background: rgba(0, 0, 0, 0.32);
+}
+
+// Only the topmost backdrop dims. Stacked blacks would compound toward black, so
+// lower ones stay mounted — Base UI dismisses through them — but paint nothing.
+// Declared after `.backdropNested` deliberately: a backdrop can be both nested and
+// covered, they have equal specificity, and "covered" has to win.
+.backdropCovered {
+    background: transparent;
 }
 
 .header {

From 5ea70d916eaecc896281b59e88e3d5c6f683686e Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 11:50:50 -0500
Subject: [PATCH 43/68] fix(docs): animate modals out as well as in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closing used to unmount the modal on the spot, so Base UI never got to run the
exit. The modal now owns its open state: a dismissal flips it, Base UI animates,
and the close is reported through onOpenChangeComplete — so whatever unmounts the
modal does it after the animation rather than cutting it off.

That covers Escape, the backdrop and the close button on its own. Buttons that
dismiss *and* act needed a way in, so a modal exposes useModalClose, which plays
the exit and then runs the handler; ConfirmModal's confirm and cancel go through
it. Its footer became a component to reach that context, since a footer passed as
a prop renders inside the modal but is built outside it.

Two things the tests caught:

`close?.(action) ?? action()` ran the action twice — closeWith returns void, so the
?? branch always fired as well. On a destructive confirm that meant archiving
twice. Written out as a conditional now.

Base UI waits for the popup's animations before reporting a close complete, and
jsdom runs none, so the wait never resolved and closes never completed in tests.
Its own escape hatch (BASE_UI_ANIMATIONS_DISABLED, see utils/useAnimationsFinished)
makes the callback immediate; set in the jest setup.

The two ConfirmModal handler tests now await the close, which is the behaviour
change rather than a weakened assertion: the handler runs once the modal has gone,
not on the click.

Prompt: please make the minimally necessary changes to also have the exit animate
as well.
---
 .../confirm_modal/confirm_modal.test.tsx      | 27 +++++++--
 .../confirm_modal/confirm_modal.tsx           | 56 ++++++++++++-------
 .../generic_modal/generic_modal.tsx           | 47 ++++++++++++++--
 webapp/tests/setup.tsx                        |  6 ++
 4 files changed, 106 insertions(+), 30 deletions(-)

diff --git a/webapp/src/components/confirm_modal/confirm_modal.test.tsx b/webapp/src/components/confirm_modal/confirm_modal.test.tsx
index d839bee..ac481e9 100644
--- a/webapp/src/components/confirm_modal/confirm_modal.test.tsx
+++ b/webapp/src/components/confirm_modal/confirm_modal.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {fireEvent, screen} from '@testing-library/react';
+import {fireEvent, screen, waitFor} from '@testing-library/react';
 import React from 'react';
 
 import ConfirmModal from './confirm_modal';
@@ -28,24 +28,39 @@ describe('ConfirmModal', () => {
         expect(screen.getByRole('button', {name: 'Cancel'})).toBeInTheDocument();
     });
 
-    it('fires onConfirm and onCancel from the respective buttons', () => {
+    // Both handlers run after the modal has animated out, not on the click: the
+    // button dismisses the modal through its own close so the exit transition can
+    // play, and the handler — which typically unmounts the modal — runs once it has.
+    it('fires onConfirm from the confirm button, after the modal closes', async () => {
         const onConfirm = jest.fn();
-        const onCancel = jest.fn();
         renderWithContext(
             <ConfirmModal
                 {...baseProps}
                 onConfirm={onConfirm}
-                onCancel={onCancel}
             >
                 <p>{'Body'}</p>
             </ConfirmModal>,
         );
 
         fireEvent.click(screen.getByRole('button', {name: 'Confirm'}));
-        expect(onConfirm).toHaveBeenCalledTimes(1);
+
+        await waitFor(() => expect(onConfirm).toHaveBeenCalledTimes(1));
+    });
+
+    it('fires onCancel from the cancel button, after the modal closes', async () => {
+        const onCancel = jest.fn();
+        renderWithContext(
+            <ConfirmModal
+                {...baseProps}
+                onCancel={onCancel}
+            >
+                <p>{'Body'}</p>
+            </ConfirmModal>,
+        );
 
         fireEvent.click(screen.getByRole('button', {name: 'Cancel'}));
-        expect(onCancel).toHaveBeenCalledTimes(1);
+
+        await waitFor(() => expect(onCancel).toHaveBeenCalledTimes(1));
     });
 
     it('renders custom button labels', () => {
diff --git a/webapp/src/components/confirm_modal/confirm_modal.tsx b/webapp/src/components/confirm_modal/confirm_modal.tsx
index 7a66163..f5ace25 100644
--- a/webapp/src/components/confirm_modal/confirm_modal.tsx
+++ b/webapp/src/components/confirm_modal/confirm_modal.tsx
@@ -5,7 +5,7 @@ import React, {useRef} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {DestructiveButton, PrimaryButton, TertiaryButton} from 'components/form_controls/button';
-import GenericModal from 'components/generic_modal/generic_modal';
+import GenericModal, {useModalClose} from 'components/generic_modal/generic_modal';
 
 import styles from './confirm_modal.module.scss';
 
@@ -40,23 +40,41 @@ const ConfirmModal = ({title, children, confirmButtonText, cancelButtonText, isC
         />
     );
 
-    const footer = (
-        <>
-            <TertiaryButton
-                ref={cancelRef}
-                type='button'
-                onClick={onCancel}
-            >
-                {cancelLabel}
-            </TertiaryButton>
-            <ConfirmButton
-                type='button'
-                onClick={onConfirm}
-            >
-                {confirmLabel}
-            </ConfirmButton>
-        </>
-    );
+    // Rendered inside the modal rather than built here, so it can reach
+    // `useModalClose`: both buttons dismiss the modal as well as acting, and going
+    // through the modal's own close lets it animate out before the handler runs and
+    // unmounts it.
+    const Footer = () => {
+        const close = useModalClose();
+
+        // Not `close?.(action) ?? action()` — close returns void, so that would run
+        // the action a second time, immediately.
+        const dismiss = (action: () => void) => () => {
+            if (close) {
+                close(action);
+            } else {
+                action();
+            }
+        };
+
+        return (
+            <>
+                <TertiaryButton
+                    ref={cancelRef}
+                    type='button'
+                    onClick={dismiss(onCancel)}
+                >
+                    {cancelLabel}
+                </TertiaryButton>
+                <ConfirmButton
+                    type='button'
+                    onClick={dismiss(onConfirm)}
+                >
+                    {confirmLabel}
+                </ConfirmButton>
+            </>
+        );
+    };
 
     return (
         <GenericModal
@@ -65,7 +83,7 @@ const ConfirmModal = ({title, children, confirmButtonText, cancelButtonText, isC
             onClose={onCancel}
             initialFocus={cancelRef}
             headerClassName={styles.header}
-            footer={footer}
+            footer={<Footer/>}
         >
             <div className={styles.body}>
                 {children}
diff --git a/webapp/src/components/generic_modal/generic_modal.tsx b/webapp/src/components/generic_modal/generic_modal.tsx
index ea4fafb..10d3d11 100644
--- a/webapp/src/components/generic_modal/generic_modal.tsx
+++ b/webapp/src/components/generic_modal/generic_modal.tsx
@@ -3,7 +3,7 @@
 
 import {Dialog} from '@base-ui-components/react/dialog';
 import classNames from 'classnames';
-import React, {createContext, useContext} from 'react';
+import React, {createContext, useCallback, useContext, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 
 import CloseIcon from '@mattermost/compass-icons/components/close';
@@ -19,6 +19,20 @@ import styles from './generic_modal.module.scss';
 // right paint band — Base UI's own nesting context isn't exported.
 const ModalNestingContext = createContext(0);
 
+type CloseWith = (after?: () => void) => void;
+
+const ModalCloseContext = createContext<CloseWith | undefined>(undefined);
+
+/**
+ * Dismisses the modal this component is inside, playing the exit transition and
+ * only then running `after`. Buttons that both close the modal and do something —
+ * a confirm, a cancel — should go through this instead of calling their handler
+ * directly, or the modal is unmounted before it can animate out.
+ *
+ * Undefined outside a modal, so a shared control can be used in both places.
+ */
+export const useModalClose = () => useContext(ModalCloseContext);
+
 type Props = {
     onClose: () => void;
     title: React.ReactNode;
@@ -58,13 +72,34 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
     const layerStyle = {'--docs-modal-level': stackLevel + nesting} as React.CSSProperties;
     const isCovered = covered > 0;
 
+    // Closing is driven from here rather than by the owner unmounting us, so the
+    // exit transition has somewhere to run: flip `open`, let Base UI animate, and
+    // report the close only once it has finished. Whatever unmounts this modal —
+    // the modal stack, or a parent's state — then does so after the animation
+    // instead of cutting it off.
+    const [open, setOpen] = useState(true);
+    const afterCloseRef = useRef<(() => void) | undefined>(undefined);
+
+    const closeWith = useCallback<CloseWith>((after) => {
+        afterCloseRef.current = after;
+        setOpen(false);
+    }, []);
+
     return (
         <Dialog.Root
-            open={true}
+            open={open}
             onOpenChange={(nextOpen) => {
                 if (!nextOpen) {
-                    onClose();
+                    closeWith();
+                }
+            }}
+            onOpenChangeComplete={(nextOpen) => {
+                if (nextOpen) {
+                    return;
                 }
+                const after = afterCloseRef.current;
+                afterCloseRef.current = undefined;
+                (after ?? onClose)();
             }}
         >
             <Dialog.Portal>
@@ -119,8 +154,10 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
                             {headerContent}
                         </div>
                         <ModalNestingContext.Provider value={nesting + 1}>
-                            {children}
-                            {footer && <div className={classNames(styles.footer, {[styles.footerDivider]: footerDivider})}>{footer}</div>}
+                            <ModalCloseContext.Provider value={closeWith}>
+                                {children}
+                                {footer && <div className={classNames(styles.footer, {[styles.footerDivider]: footerDivider})}>{footer}</div>}
+                            </ModalCloseContext.Provider>
                         </ModalNestingContext.Provider>
                     </Dialog.Popup>
                 </div>
diff --git a/webapp/tests/setup.tsx b/webapp/tests/setup.tsx
index 073caff..0c439c4 100644
--- a/webapp/tests/setup.tsx
+++ b/webapp/tests/setup.tsx
@@ -3,6 +3,12 @@
 
 import '@testing-library/jest-dom';
 
+// Base UI waits for a popup's animations to finish before reporting a close as
+// complete, which is how a modal gets to animate out. jsdom runs no animations, so
+// that wait never resolves and the close never completes. Base UI's own escape
+// hatch (see utils/useAnimationsFinished) makes it run the callback immediately.
+(globalThis as {BASE_UI_ANIMATIONS_DISABLED?: boolean}).BASE_UI_ANIMATIONS_DISABLED = true;
+
 // useTeamContext's module also imports team actions (for useEnsureCurrentTeam);
 // the real action tree pulls in ESM-only deps jest doesn't transform. No test
 // exercises team actions, so stub the module everywhere.

From bf426c54c24d3dd29aa0f233acb962a7a98815d6 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 12:00:17 -0500
Subject: [PATCH 44/68] fix(docs): let modals animate in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The entrance styles were in place but never applied, for every modal. Base UI's
useTransitionStatus initialises `mounted` from `open`:

    const [mounted, setMounted] = useState(open);
    if (open && !mounted) { setMounted(true); setTransitionStatus('starting'); }

A dialog already open on its first render fails that condition, so the starting
state is skipped and `data-starting-style` never appears. Every modal here is
created already-open — openDocsModal mounts one, or a parent renders one — so none
of them could animate in.

The modal now mounts closed and opens in an effect, after the first paint, so Base
UI sees the false -> true change it needs. A ref guards the closed state it mounts
in, so a completion reported before it opens isn't mistaken for a dismissal and
doesn't close it on arrival.

Not covered by a test: the starting attribute is applied and cleared within a
frame, and jsdom runs no animations, so an assertion would pass whether or not the
entrance works. What is covered is that the modal still ends up open despite
mounting closed — every existing modal test asserts its content — and that closing
still completes.

Prompt: we still don't have any entrance animation (all modals, apparently)
---
 .../generic_modal/generic_modal.tsx           | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/generic_modal/generic_modal.tsx b/webapp/src/components/generic_modal/generic_modal.tsx
index 10d3d11..8d22fa7 100644
--- a/webapp/src/components/generic_modal/generic_modal.tsx
+++ b/webapp/src/components/generic_modal/generic_modal.tsx
@@ -3,7 +3,7 @@
 
 import {Dialog} from '@base-ui-components/react/dialog';
 import classNames from 'classnames';
-import React, {createContext, useCallback, useContext, useRef, useState} from 'react';
+import React, {createContext, useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 
 import CloseIcon from '@mattermost/compass-icons/components/close';
@@ -77,8 +77,19 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
     // report the close only once it has finished. Whatever unmounts this modal —
     // the modal stack, or a parent's state — then does so after the animation
     // instead of cutting it off.
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(false);
     const afterCloseRef = useRef<(() => void) | undefined>(undefined);
+    const openedRef = useRef(false);
+
+    // Opened after the first paint rather than mounted open, so Base UI sees a
+    // false -> true change. A dialog that is already open on its first render never
+    // gets `data-starting-style` — useTransitionStatus initialises its `mounted`
+    // from `open`, so the starting state is skipped — and appears with no entrance
+    // animation. Every modal here is created already-open, so that was all of them.
+    useEffect(() => {
+        openedRef.current = true;
+        setOpen(true);
+    }, []);
 
     const closeWith = useCallback<CloseWith>((after) => {
         afterCloseRef.current = after;
@@ -94,7 +105,10 @@ const GenericModal = ({onClose, title, ariaLabel, className, headerClassName, in
                 }
             }}
             onOpenChangeComplete={(nextOpen) => {
-                if (nextOpen) {
+                // `openedRef` guards the closed state this mounts in: without it a
+                // completion reported before the modal has opened would be read as a
+                // dismissal and close it on arrival.
+                if (nextOpen || !openedRef.current) {
                     return;
                 }
                 const after = afterCloseRef.current;

From f9847631090e59319330e00fea5f3106b0d22060 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 12:21:18 -0500
Subject: [PATCH 45/68] style(docs): soften how far a covered modal recedes

scale(0.96) translateY(-8px) -> scale(0.99) translateY(-2px), a quarter of the
previous travel. It was reading as the modal shrinking rather than stepping back.
The dim from the covering backdrop carries the layering; this only has to be enough
to notice.

The entrance keeps its larger travel: it has to bring a surface in from nothing,
where receding only hints at depth. Duration and easing stay shared, so the two
still read as one motion.

Prompt: reduce covered modal level transition effect by ~75% -- shouldn't scale
down as much, should be just enough to notice
---
 .../generic_modal/generic_modal.module.scss          | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/generic_modal/generic_modal.module.scss b/webapp/src/components/generic_modal/generic_modal.module.scss
index 7f84700..57152f7 100644
--- a/webapp/src/components/generic_modal/generic_modal.module.scss
+++ b/webapp/src/components/generic_modal/generic_modal.module.scss
@@ -37,9 +37,10 @@
 }
 
 // Arriving and leaving, via the attributes Base UI puts on the popup while it
-// transitions. Deliberately the same duration, easing and scale as the receding
-// step below, and rising from the opposite direction, so opening a modal and
-// sinking one behind another read as the same motion rather than two effects.
+// transitions. Same duration and easing as the receding step below, rising from the
+// opposite direction, so the two read as one motion — but with more travel: this
+// one has to carry a surface in from nothing, where receding only has to hint at
+// depth.
 //
 // The fade here is about a surface that isn't there yet; a modal that has arrived
 // stays fully opaque even once something covers it.
@@ -62,9 +63,12 @@
 // a translucent one. The dimming comes from the covering modal's backdrop, which
 // paints above this popup's band; fading the popup too would double the effect and
 // let the app show through a modal.
+// Kept deliberately slight — a quarter of what it was — so it reads as a step back
+// rather than as the modal shrinking. The dim from the covering backdrop is doing
+// most of the work; this only has to be enough to notice.
 .modalCovered,
 .modal[data-nested-dialog-open] {
-    transform: scale(0.96) translateY(-8px);
+    transform: scale(0.99) translateY(-2px);
     pointer-events: none;
 }
 

From 7e522b55ad67e4358c50497e18746a83e265d1f8 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 12:24:41 -0500
Subject: [PATCH 46/68] style(docs): sink a covered modal instead of lifting it

translateY(-2px) -> translateY(6px). It now settles downward as something opens over
it, so the covering modal reads as sitting in front rather than the two sliding
apart. Scale is unchanged.

Prompt: translate down 6px
---
 .../generic_modal/generic_modal.module.scss      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/generic_modal/generic_modal.module.scss b/webapp/src/components/generic_modal/generic_modal.module.scss
index 57152f7..bc5bf09 100644
--- a/webapp/src/components/generic_modal/generic_modal.module.scss
+++ b/webapp/src/components/generic_modal/generic_modal.module.scss
@@ -37,10 +37,9 @@
 }
 
 // Arriving and leaving, via the attributes Base UI puts on the popup while it
-// transitions. Same duration and easing as the receding step below, rising from the
-// opposite direction, so the two read as one motion — but with more travel: this
-// one has to carry a surface in from nothing, where receding only has to hint at
-// depth.
+// transitions. Same duration and easing as the receding step below, and the same
+// downward axis, so the two read as one motion — but with more travel: this one has
+// to carry a surface in from nothing, where receding only has to hint at depth.
 //
 // The fade here is about a surface that isn't there yet; a modal that has arrived
 // stays fully opaque even once something covers it.
@@ -63,12 +62,13 @@
 // a translucent one. The dimming comes from the covering modal's backdrop, which
 // paints above this popup's band; fading the popup too would double the effect and
 // let the app show through a modal.
-// Kept deliberately slight — a quarter of what it was — so it reads as a step back
-// rather than as the modal shrinking. The dim from the covering backdrop is doing
-// most of the work; this only has to be enough to notice.
+// Kept deliberately slight so it reads as a step back rather than as the modal
+// shrinking. The dim from the covering backdrop is doing most of the work; this only
+// has to be enough to notice. Sinks down rather than lifting, so the covering modal
+// appears to sit in front of it rather than the two sliding apart.
 .modalCovered,
 .modal[data-nested-dialog-open] {
-    transform: scale(0.99) translateY(-2px);
+    transform: scale(0.99) translateY(6px);
     pointer-events: none;
 }
 

From 4e998052795db8465d4680fbb93bb58fa00fb214 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 12:32:14 -0500
Subject: [PATCH 47/68] style(docs): settle a covered modal by 2px

Prompt: changed to 2px -- commit
---
 webapp/src/components/generic_modal/generic_modal.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/generic_modal/generic_modal.module.scss b/webapp/src/components/generic_modal/generic_modal.module.scss
index bc5bf09..8b5e14f 100644
--- a/webapp/src/components/generic_modal/generic_modal.module.scss
+++ b/webapp/src/components/generic_modal/generic_modal.module.scss
@@ -68,7 +68,7 @@
 // appears to sit in front of it rather than the two sliding apart.
 .modalCovered,
 .modal[data-nested-dialog-open] {
-    transform: scale(0.99) translateY(6px);
+    transform: scale(0.99) translateY(2px);
     pointer-events: none;
 }
 

From 26da9f114345e60f77ffd22e5198b66d788800fa Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 12:36:33 -0500
Subject: [PATCH 48/68] fix(docs): pin popups to their trigger inside a modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base UI positions a popup with `positionMethod: 'absolute'` by default, placing it
in document coordinates. The trigger can sit inside a modal, which is
`position: fixed` — a different coordinate space — so the popup and its trigger
drift apart as soon as anything scrolls. That is the landing-page dropdown in space
settings sliding away from its opener.

`positionMethod='fixed'` puts the popup in the same coordinate space the trigger is
actually in. It is equally correct outside a modal, so the select doesn't need a
prop for it.

Applied to the people picker too: it only ever opens inside the share modal, so it
had the same defect waiting.

Ruled out along the way: no transformed ancestor traps the fixed positioning (the
settings panes only set overflow), scroll tracking is active (autoUpdate runs since
neither popup sets keepMounted), and layering is fine — the host puts
--z-index-menu at 1100 above --z-index-modal at 1050.

Prompt: the default landing page dropdown in space settings is not correctly pinned
to the opener -- when you scroll the whole container moves up/down
---
 webapp/src/components/form_controls/select.tsx            | 7 +++++++
 webapp/src/components/share_space_modal/people_picker.tsx | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/webapp/src/components/form_controls/select.tsx b/webapp/src/components/form_controls/select.tsx
index 3a67ee6..24053dc 100644
--- a/webapp/src/components/form_controls/select.tsx
+++ b/webapp/src/components/form_controls/select.tsx
@@ -62,8 +62,15 @@ const Select = ({id, label, value, options, onChange, disabled}: Props) => {
                 </BaseSelect.Icon>
             </BaseSelect.Trigger>
             <BaseSelect.Portal>
+                {/* Viewport coordinates, not document. Base UI defaults to
+                    `absolute`, which places the popup in the document while the
+                    trigger can sit inside a `position: fixed` container — a modal —
+                    so the two drift apart the moment anything scrolls. `fixed`
+                    matches the coordinate space the trigger is actually in, and is
+                    equally correct outside a modal. */}
                 <BaseSelect.Positioner
                     className={styles.positioner}
+                    positionMethod='fixed'
                     side='bottom'
                     align='start'
                     sideOffset={4}
diff --git a/webapp/src/components/share_space_modal/people_picker.tsx b/webapp/src/components/share_space_modal/people_picker.tsx
index 8d1d8f9..445728b 100644
--- a/webapp/src/components/share_space_modal/people_picker.tsx
+++ b/webapp/src/components/share_space_modal/people_picker.tsx
@@ -85,8 +85,12 @@ const PeoplePicker = ({selected, excludeIds, onChange}: Props) => {
                 />
             </Combobox.Chips>
             <Combobox.Portal>
+                {/* Viewport coordinates: this picker only ever opens inside a modal,
+                    which is `position: fixed`, so the default `absolute` would place
+                    the popup in the document and let the two drift apart on scroll. */}
                 <Combobox.Positioner
                     className={styles.positioner}
+                    positionMethod='fixed'
                     sideOffset={4}
                 >
                     <Combobox.Popup className={styles.popup}>

From cbc23fd92e5e2c9ac96465c2148546b449c4cee3 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 12:42:47 -0500
Subject: [PATCH 49/68] fix(docs): anchor the people picker popup to its field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base UI anchors a combobox popup to its input:

    const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputElement)

Here the input is a flex item inside the chips container — it sits after the chips
and shrinks as they are added — so the popup was measured and placed against that
remnant rather than the field. `--anchor-width` was the leftover input width, and
every chip re-anchored and resized the popup.

The positioner now takes the chips container as its anchor, which is the element the
popup should line up with. Both this and the positionMethod from the previous commit
are public props that pass straight through to floating-ui (strategy and position
reference) — no measurement or offset code of our own.

Prompt: the combobox open is still VERY broken
---
 .../share_space_modal/people_picker.tsx       | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/share_space_modal/people_picker.tsx b/webapp/src/components/share_space_modal/people_picker.tsx
index 445728b..2524ef3 100644
--- a/webapp/src/components/share_space_modal/people_picker.tsx
+++ b/webapp/src/components/share_space_modal/people_picker.tsx
@@ -4,7 +4,7 @@
 import {Combobox} from '@base-ui-components/react/combobox';
 import type {MemberProfile} from 'hooks/members';
 import {useUserSearch} from 'hooks/user_search';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {Avatar} from 'webapp_globals';
 
@@ -35,6 +35,9 @@ const PeoplePicker = ({selected, excludeIds, onChange}: Props) => {
     const [query, setQuery] = useState('');
     const {results, loading} = useUserSearch(query, excludeIds);
 
+    // The visible field, which the popup anchors to — see the positioner below.
+    const fieldRef = useRef<HTMLDivElement>(null);
+
     const placeholder = formatMessage({id: 'docs.share.search', defaultMessage: 'Add people or groups'});
 
     return (
@@ -50,7 +53,10 @@ const PeoplePicker = ({selected, excludeIds, onChange}: Props) => {
             isItemEqualToValue={sameUser}
             openOnInputClick={false}
         >
-            <Combobox.Chips className={styles.control}>
+            <Combobox.Chips
+                ref={fieldRef}
+                className={styles.control}
+            >
                 <MagnifyIcon
                     className={styles.searchIcon}
                     size={16}
@@ -85,11 +91,19 @@ const PeoplePicker = ({selected, excludeIds, onChange}: Props) => {
                 />
             </Combobox.Chips>
             <Combobox.Portal>
-                {/* Viewport coordinates: this picker only ever opens inside a modal,
-                    which is `position: fixed`, so the default `absolute` would place
-                    the popup in the document and let the two drift apart on scroll. */}
+                {/* Anchored to the field, not the input. Base UI anchors a combobox
+                    popup to its input by default, and here the input is a flex item
+                    inside the chips container: it sits after the chips and shrinks as
+                    they are added, so the popup was sized to that remnant and
+                    re-anchored on every chip. `--anchor-width` now measures the
+                    field, which is what the popup should line up with.
+
+                    Viewport coordinates because this only opens inside a modal, which
+                    is `position: fixed`; the default `absolute` places the popup in
+                    the document and the two drift apart on scroll. */}
                 <Combobox.Positioner
                     className={styles.positioner}
+                    anchor={fieldRef}
                     positionMethod='fixed'
                     sideOffset={4}
                 >

From 6e0476e975449faffbe99cd3fcadaadae53246c3 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 12:45:58 -0500
Subject: [PATCH 50/68] fix(docs): stop the select popup detaching from its
 trigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The real cause, and why the previous positionMethod change had no effect: Base UI's
alignItemWithTrigger defaults to true. In that mode the popup overlaps the trigger so
the selected item's text lines up with the trigger's value — macOS-style — and to
achieve it SelectPositioner gives the positioner a static style, passes
disableAnchorTracking, reports side 'none' and locks scrolling (lines 96, 110,
114-115).

So floating-ui's computed position was never used, the side/align/sideOffset we pass
were ignored, and nothing tracked the trigger. Inside a scrollable modal pane the
popup stayed where it first landed while the field scrolled away from it.

Turning it off makes this an ordinary anchored popup: tracking on, our placement
honoured, and positionMethod='fixed' now actually applied — which is what keeps it
aligned with a trigger inside a fixed modal.

Still no hacks: alignItemWithTrigger, positionMethod and anchor are all public props
that resolve to floating-ui's own strategy and position-reference.

Prompt: Space Settings > Default landing page STILL HAS THIS BUG
---
 .../src/components/form_controls/select.tsx   | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/form_controls/select.tsx b/webapp/src/components/form_controls/select.tsx
index 24053dc..b0bc384 100644
--- a/webapp/src/components/form_controls/select.tsx
+++ b/webapp/src/components/form_controls/select.tsx
@@ -62,14 +62,26 @@ const Select = ({id, label, value, options, onChange, disabled}: Props) => {
                 </BaseSelect.Icon>
             </BaseSelect.Trigger>
             <BaseSelect.Portal>
-                {/* Viewport coordinates, not document. Base UI defaults to
-                    `absolute`, which places the popup in the document while the
-                    trigger can sit inside a `position: fixed` container — a modal —
-                    so the two drift apart the moment anything scrolls. `fixed`
-                    matches the coordinate space the trigger is actually in, and is
-                    equally correct outside a modal. */}
+                {/* alignItemWithTrigger is Base UI's default and is why this popup
+                    would not stay with its trigger. In that mode the popup overlaps
+                    the trigger so the selected item's text lines up with the trigger's
+                    value — macOS-style — and to do it Base UI gives the positioner a
+                    static style, sets `disableAnchorTracking`, reports side 'none' and
+                    locks scrolling (SelectPositioner lines 96, 110, 114-115). floating-
+                    ui's computed position is not used at all, side/align/sideOffset are
+                    ignored, and nothing follows the trigger — so inside a scrollable
+                    modal pane the popup sits where it first landed while the field
+                    scrolls away from it.
+
+                    Off, it is an ordinary anchored popup: tracking on, our side and
+                    offsets honoured, and positionMethod below actually applied.
+
+                    Viewport coordinates rather than document: the trigger can sit in a
+                    modal, which is `position: fixed`, and matching that space keeps the
+                    two from drifting apart on scroll. Equally correct outside a modal. */}
                 <BaseSelect.Positioner
                     className={styles.positioner}
+                    alignItemWithTrigger={false}
                     positionMethod='fixed'
                     side='bottom'
                     align='start'

From 5f1adfede2253b67e80ec4a6787e6a50566af694 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 13:35:29 -0500
Subject: [PATCH 51/68] fix(docs): keep resize handles clear of sidebar
 scrollbars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The handle is a 12px grab area straddling the panel edge, so its inner half sits
directly over the scrollbar of a panel that scrolls — and the handle wins the
pointer, making the scrollbar hard to grab. Both sidebars scroll, so both were
affected.

ResizableDivider takes an optional scrollbarClearance that slides it outward. At 6px
the hitbox clears the panel entirely, so the scrollbar is fully grabbable whatever
width the platform draws it — no assumption about scrollbar size.

The line moves with the hitbox rather than staying on the border: an indicator you
can see but not grab is worse than one a few pixels off. `max()` pins it to the
handle's inner edge once shifted, so it still reads as hugging the border rather than
floating in the content.

Opt-in, defaulting to 0, so a handle on a panel that doesn't scroll keeps straddling
the edge as before. Passed at the two call sites whose panels have overflow-y: auto.

Prompt: when a sidebar resize handle is near a scrollbar, it becomes hard to grab the
scrollbar -- adjust padding/margin either on resize handle, or at the callsite when
scrollbar is anticipated
---
 webapp/src/components/docs_root/docs_root.tsx |  5 +++++
 .../resizable_divider.module.scss             | 19 +++++++++++++++----
 .../resizable_divider/resizable_divider.tsx   | 11 ++++++++++-
 .../components/space_view/sidebar/sidebar.tsx |  7 +++++++
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index 901d680..ca5da3d 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -24,6 +24,10 @@ const DEFAULT_SPACES_WIDTH = 264;
 const MIN_SPACES_WIDTH = 220;
 const MAX_SPACES_WIDTH = 420;
 
+// The spaces list scrolls, so its scrollbar sits on the edge the resize handle
+// straddles; this moves the handle clear of it.
+const SPACES_SCROLLBAR_CLEARANCE = 6;
+
 const DocsRoot = () => {
     useBootstrapDocs();
 
@@ -60,6 +64,7 @@ const DocsRoot = () => {
                 <ResizableDivider
                     ariaLabel={formatMessage({id: 'docs.sidebar.resizeSpaces', defaultMessage: 'Resize spaces sidebar'})}
                     side='left'
+                    scrollbarClearance={SPACES_SCROLLBAR_CLEARANCE}
                     width={width}
                     minWidth={MIN_SPACES_WIDTH}
                     maxWidth={MAX_SPACES_WIDTH}
diff --git a/webapp/src/components/resizable_divider/resizable_divider.module.scss b/webapp/src/components/resizable_divider/resizable_divider.module.scss
index 979578c..a6ed711 100644
--- a/webapp/src/components/resizable_divider/resizable_divider.module.scss
+++ b/webapp/src/components/resizable_divider/resizable_divider.module.scss
@@ -39,19 +39,30 @@
 }
 
 // `left`/`right` name the edge the handle sits on, so the line hugs the border.
+//
+// `--docs-divider-clearance` slides the whole handle outward, off the panel it
+// resizes. A panel that scrolls puts its scrollbar on exactly the edge the handle
+// straddles, and the handle wins the pointer — so the scrollbar becomes hard to
+// grab. At 6px or more the 12px hitbox clears the panel entirely, whatever width
+// the platform draws its scrollbar.
+//
+// The line moves with it rather than staying behind: an indicator you can see but
+// not grab is worse than one that sits a few pixels off the border. `max()` pins it
+// to the handle's inner edge once shifted, so it still reads as hugging the border
+// instead of floating in the content.
 .left {
-    right: -6px;
+    right: calc(-6px - var(--docs-divider-clearance, 0px));
 
     &::after {
-        left: 4px;
+        left: max(0px, calc(4px - var(--docs-divider-clearance, 0px)));
     }
 }
 
 .right {
-    left: -6px;
+    left: calc(-6px - var(--docs-divider-clearance, 0px));
 
     &::after {
-        right: 4px;
+        right: max(0px, calc(4px - var(--docs-divider-clearance, 0px)));
     }
 }
 
diff --git a/webapp/src/components/resizable_divider/resizable_divider.tsx b/webapp/src/components/resizable_divider/resizable_divider.tsx
index faacb21..676ff18 100644
--- a/webapp/src/components/resizable_divider/resizable_divider.tsx
+++ b/webapp/src/components/resizable_divider/resizable_divider.tsx
@@ -28,6 +28,14 @@ type Props = {
 
     /** Fires once when the drag ends — the place to persist the result. */
     onResizeEnd: (width: number) => void;
+
+    /**
+     * Pixels to slide the handle outward, off the panel it resizes. Pass this when
+     * the panel scrolls: its scrollbar sits on the same edge the handle straddles,
+     * and the handle would otherwise take the clicks meant for it. 6 is enough to
+     * clear the panel entirely, whatever width the platform's scrollbar is.
+     */
+    scrollbarClearance?: number;
 };
 
 // Keyboard resizing steps by this many pixels per arrow press.
@@ -37,7 +45,7 @@ const KEYBOARD_STEP = 16;
 // is easy to land on by feel (core's sidebars do the same).
 const SNAP_DISTANCE = 10;
 
-const ResizableDivider = ({ariaLabel, side, width, minWidth, maxWidth, defaultWidth, onResize, onResizeEnd}: Props) => {
+const ResizableDivider = ({ariaLabel, side, width, minWidth, maxWidth, defaultWidth, onResize, onResizeEnd, scrollbarClearance = 0}: Props) => {
     const [dragging, setDragging] = useState(false);
     const [snapped, setSnapped] = useState(false);
     const startX = useRef(0);
@@ -128,6 +136,7 @@ const ResizableDivider = ({ariaLabel, side, width, minWidth, maxWidth, defaultWi
                 [styles.active]: dragging,
                 [styles.snapped]: dragging && snapped,
             })}
+            style={{'--docs-divider-clearance': `${scrollbarClearance}px`} as React.CSSProperties}
             role='separator'
             tabIndex={0}
             aria-label={ariaLabel}
diff --git a/webapp/src/components/space_view/sidebar/sidebar.tsx b/webapp/src/components/space_view/sidebar/sidebar.tsx
index 18d8c32..0a63c2f 100644
--- a/webapp/src/components/space_view/sidebar/sidebar.tsx
+++ b/webapp/src/components/space_view/sidebar/sidebar.tsx
@@ -14,6 +14,10 @@ export const DEFAULT_SIDEBAR_WIDTH = 264;
 const MIN_SIDEBAR_WIDTH = 200;
 const MAX_SIDEBAR_WIDTH = 480;
 
+// Clears the pages panel's own scrollbar, which sits on the edge the resize handle
+// straddles; without it the handle takes the clicks meant for the scrollbar.
+const SCROLLBAR_CLEARANCE = 6;
+
 type Props = {
     open: boolean;
     children: React.ReactNode;
@@ -48,6 +52,9 @@ const Sidebar = ({open, children}: Props) => {
                 <ResizableDivider
                     ariaLabel={formatMessage({id: 'docs.sidebar.resize', defaultMessage: 'Resize pages sidebar'})}
                     side='left'
+
+                    // The pages panel scrolls, so its scrollbar shares this edge.
+                    scrollbarClearance={SCROLLBAR_CLEARANCE}
                     width={width}
                     minWidth={MIN_SIDEBAR_WIDTH}
                     maxWidth={MAX_SIDEBAR_WIDTH}

From 18bc567c36adf8adc947bced355e7011f5193580 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 15:32:18 -0500
Subject: [PATCH 52/68] fix(docs): stop the pages sidebar clipping its resize
 handle

The slide-in/out transition clipped with `overflow: hidden` on the same
element the handle is positioned against, so the scrollbar clearance added
in 5f1adfe pushed the handle fully outside the clip and left almost nothing
to grab. Clipping now happens on a dedicated inner element, leaving the
handle free to hang over the edge.

Prompt: sidebar resize handle for the pages sidebar has a net width of
~1px, making it hard to grab
---
 .../space_view/sidebar/sidebar.module.scss         | 10 +++++++++-
 .../src/components/space_view/sidebar/sidebar.tsx  | 14 ++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/space_view/sidebar/sidebar.module.scss b/webapp/src/components/space_view/sidebar/sidebar.module.scss
index c32f630..1ab76f1 100644
--- a/webapp/src/components/space_view/sidebar/sidebar.module.scss
+++ b/webapp/src/components/space_view/sidebar/sidebar.module.scss
@@ -1,7 +1,6 @@
 .sidebar {
     position: relative;
     flex-shrink: 0;
-    overflow: hidden;
 
     // Closed: width animates to 0, then visibility flips so the clipped content
     // leaves the tab order (it stays mounted for the slide).
@@ -9,6 +8,15 @@
     transition: width 200ms ease, visibility 0s 200ms;
 }
 
+// The clip is its own element rather than `overflow: hidden` on .sidebar so the
+// resize handle, which straddles the sidebar's edge and hangs outside it, isn't
+// clipped away along with the sliding content.
+.clip {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
 .open {
     visibility: visible;
     transition: width 200ms ease;
diff --git a/webapp/src/components/space_view/sidebar/sidebar.tsx b/webapp/src/components/space_view/sidebar/sidebar.tsx
index 0a63c2f..88a462c 100644
--- a/webapp/src/components/space_view/sidebar/sidebar.tsx
+++ b/webapp/src/components/space_view/sidebar/sidebar.tsx
@@ -26,7 +26,7 @@ type Props = {
 /**
  * The space view's left sidebar: a user-resizable panel that slides in and out.
  * The outer element animates its width for the open/close transition while the
- * inner element keeps the full width, so the content is revealed and clipped
+ * innermost element keeps the full width, so the content is revealed and clipped
  * rather than reflowed mid-slide.
  */
 const Sidebar = ({open, children}: Props) => {
@@ -42,11 +42,13 @@ const Sidebar = ({open, children}: Props) => {
             })}
             style={{width: open ? width : 0}}
         >
-            <div
-                className={styles.inner}
-                style={{width}}
-            >
-                {children}
+            <div className={styles.clip}>
+                <div
+                    className={styles.inner}
+                    style={{width}}
+                >
+                    {children}
+                </div>
             </div>
             {open && (
                 <ResizableDivider

From 89a4bfaabd696da196f08ac74f941b944bef1871 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 16:30:06 -0500
Subject: [PATCH 53/68] fix(docs): keep the viewer in the space after deleting
 a page

Deleting the page being viewed sent the viewer to Docs home, ejecting them
from the space over a single page. It now lands on the space's home URL,
which keeps them in context and lets the default-landing-page redirect
apply, falling back to the space front door.

Also covers deleting an ancestor of the routed page: subpages go with their
parent, so the exact-id check left the viewer on a page that no longer
existed, relying on SpaceView's not-found redirect to bounce them to
/overview. Containment is now a selector over the same subtree walk the
delete action prunes with.

The arrival replaces rather than pushes, since the URL being left names a
page that no longer exists.

Prompt: fix a routing issue when deleting a page -- it currently reverts to
Home (instead, it SHOULD stay in the space, either back to space overview,
or the configured default page)
---
 .../delete_page_modal.test.tsx                | 130 ++++++++++++++++++
 .../delete_page_modal/delete_page_modal.tsx   |  19 ++-
 webapp/src/hooks/navigation.ts                |  11 +-
 webapp/src/store/selectors.ts                 |   7 +
 4 files changed, 160 insertions(+), 7 deletions(-)
 create mode 100644 webapp/src/components/delete_page_modal/delete_page_modal.test.tsx

diff --git a/webapp/src/components/delete_page_modal/delete_page_modal.test.tsx b/webapp/src/components/delete_page_modal/delete_page_modal.test.tsx
new file mode 100644
index 0000000..3ea2ad5
--- /dev/null
+++ b/webapp/src/components/delete_page_modal/delete_page_modal.test.tsx
@@ -0,0 +1,130 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import {createMemoryHistory} from 'history';
+import React from 'react';
+
+import {makePage, makeSpace, makeTeam} from 'store/test_fixtures';
+
+import {toast} from 'components/toast';
+
+import type {Page} from 'types/docs';
+
+import DeletePageModal from './delete_page_modal';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+const mockDeletePage = jest.fn();
+let mockDeleteResult: Promise<void> = Promise.resolve();
+
+// deletePage is a thunk the modal awaits, so the mock has to be a thunk too.
+jest.mock('store/actions', () => ({
+    ...jest.requireActual('store/actions'),
+    deletePage: (...args: unknown[]) => {
+        mockDeletePage(...args as []);
+        return async () => mockDeleteResult;
+    },
+}));
+
+jest.mock('components/toast', () => ({toast: {error: jest.fn()}}));
+
+const TEAM = makeTeam('team1id', 'team1');
+const SPACE = makeSpace('space1', 'Engineering', TEAM.id);
+
+const child = (id: string, parentId: string): Page => ({
+    ...makePage(id, SPACE.id, id),
+    parent_id: parentId,
+});
+
+// parent
+//   childOfParent
+// unrelated
+const PAGES: Page[] = [makePage('parent', SPACE.id, 'Parent'), child('childOfParent', 'parent'), makePage('unrelated', SPACE.id, 'Unrelated')];
+
+const PAGE_PATH = `/team1/spaces/${SPACE.id}/childOfParent`;
+const SPACE_PATH = `/team1/spaces/${SPACE.id}`;
+
+const renderModal = (deletingPageId: string) => {
+    const history = createMemoryHistory({initialEntries: [PAGE_PATH]});
+    const onClose = jest.fn();
+
+    const rendered = renderWithContext(
+        <DeletePageModal
+            spaceId={SPACE.id}
+            pageId={deletingPageId}
+            pageTitle={deletingPageId}
+            onClose={onClose}
+        />,
+        {
+            history,
+            state: {
+                currentTeam: TEAM,
+                docs: {
+                    spaces: {[SPACE.id]: SPACE},
+                    pages: Object.fromEntries(PAGES.map((page) => [page.id, page])),
+                    pagesInSpace: {[SPACE.id]: new Set(PAGES.map((page) => page.id))},
+                },
+            },
+        },
+    );
+
+    return {...rendered, history, onClose};
+};
+
+const confirmDelete = () => fireEvent.click(screen.getByRole('button', {name: 'Delete'}));
+
+beforeEach(() => {
+    jest.clearAllMocks();
+    mockDeleteResult = Promise.resolve();
+});
+
+describe('DeletePageModal', () => {
+    it('sends the viewer to the space, not Docs home, when the routed page is deleted', async () => {
+        const {history} = renderModal('childOfParent');
+
+        confirmDelete();
+
+        await waitFor(() => expect(history.location.pathname).toBe(SPACE_PATH));
+        expect(mockDeletePage).toHaveBeenCalledWith(SPACE.id, 'childOfParent');
+    });
+
+    it('replaces the deleted page in history rather than pushing, so Back cannot return to it', async () => {
+        const {history} = renderModal('childOfParent');
+
+        confirmDelete();
+
+        await waitFor(() => expect(history.location.pathname).toBe(SPACE_PATH));
+        expect(history.length).toBe(1);
+    });
+
+    // Subpages are deleted with their parent, so viewing a descendant of the
+    // deleted page loses the page too — the exact-match check missed this.
+    it('sends the viewer to the space when an ancestor of the routed page is deleted', async () => {
+        const {history} = renderModal('parent');
+
+        confirmDelete();
+
+        await waitFor(() => expect(history.location.pathname).toBe(SPACE_PATH));
+    });
+
+    it('stays put when the deleted page is not the one being viewed', async () => {
+        const {history, onClose} = renderModal('unrelated');
+
+        confirmDelete();
+
+        await waitFor(() => expect(onClose).toHaveBeenCalled());
+        expect(history.location.pathname).toBe(PAGE_PATH);
+    });
+
+    it('surfaces a failure and leaves the viewer on the page', async () => {
+        mockDeleteResult = Promise.reject(new Error('nope'));
+
+        const {history} = renderModal('childOfParent');
+
+        confirmDelete();
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalled());
+        expect(history.location.pathname).toBe(PAGE_PATH);
+    });
+});
diff --git a/webapp/src/components/delete_page_modal/delete_page_modal.tsx b/webapp/src/components/delete_page_modal/delete_page_modal.tsx
index a135da3..127f8c0 100644
--- a/webapp/src/components/delete_page_modal/delete_page_modal.tsx
+++ b/webapp/src/components/delete_page_modal/delete_page_modal.tsx
@@ -2,11 +2,12 @@
 // See LICENSE.txt for license information.
 
 import {useDocsNavigation} from 'hooks/navigation';
-import {useAppDispatch} from 'hooks/redux';
+import {useAppDispatch, useAppSelector} from 'hooks/redux';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {deletePage} from 'store/actions';
+import {isPageInSubtree} from 'store/selectors';
 
 import ConfirmModal from 'components/confirm_modal/confirm_modal';
 import {toast} from 'components/toast';
@@ -19,18 +20,24 @@ type Props = {
 };
 
 /**
- * Confirms deleting a page and its subpages. Deleting the page currently routed
- * to leaves nothing to show, so the viewer is sent home.
+ * Confirms deleting a page and its subpages. Deleting the page being viewed — or
+ * any of its ancestors, since subpages go with it — leaves nothing to show, so
+ * the viewer lands on the space's home URL. That keeps them in the space and lets
+ * the default-landing-page redirect apply, rather than ejecting them to Docs home.
  */
 const DeletePageModal = ({spaceId, pageId, pageTitle, onClose}: Props) => {
     const dispatch = useAppDispatch();
-    const {pageId: routedPageId, goHome} = useDocsNavigation();
+    const {pageId: routedPageId, goToSpace} = useDocsNavigation();
+
+    // Resolved before the delete, while the subtree is still in the store.
+    const viewingDeletedSubtree = useAppSelector((state) =>
+        (routedPageId ? isPageInSubtree(state, pageId, routedPageId) : false));
 
     const confirm = async () => {
         try {
             await dispatch(deletePage(spaceId, pageId));
-            if (routedPageId === pageId) {
-                goHome();
+            if (viewingDeletedSubtree) {
+                goToSpace(spaceId, {replace: true});
             }
         } catch (error) {
             toast.error(
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index c29bb68..ae5308b 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -38,7 +38,16 @@ export function useDocsNavigation() {
     // ?edit=1 on a space or overview URL names nothing to edit and is ignored.
     const isEditing = Boolean(pageId) && !isOverview && new URLSearchParams(search).get(EDIT_QUERY) === '1';
 
-    const goToSpace = useCallback((id: string) => history.push(spacePath(teamName, id)), [history, teamName]);
+    // `replace` for arrivals that follow the routed page ceasing to exist: the URL
+    // being left is dead, so it shouldn't be somewhere Back can return to.
+    const goToSpace = useCallback((id: string, {replace = false} = {}) => {
+        const path = spacePath(teamName, id);
+        if (replace) {
+            history.replace(path);
+        } else {
+            history.push(path);
+        }
+    }, [history, teamName]);
     const goToPage = useCallback((space: string, page: string) => history.push(pagePath(teamName, space, page)), [history, teamName]);
     const goToDraft = useCallback((space: string, page: string) => history.push(draftPath(teamName, space, page)), [history, teamName]);
     const goToEditPage = useCallback((space: string, page: string) => history.push(editPagePath(teamName, space, page)), [history, teamName]);
diff --git a/webapp/src/store/selectors.ts b/webapp/src/store/selectors.ts
index 4d6f755..a4ef7e7 100644
--- a/webapp/src/store/selectors.ts
+++ b/webapp/src/store/selectors.ts
@@ -10,6 +10,7 @@ import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 
 import type {Page, Space} from 'types/docs';
 
+import {collectSubtreeIds} from './entities';
 import type {DocsEntitiesState, DocsPluginState} from './types';
 
 const EMPTY_PLUGIN_STATE: DocsPluginState = {
@@ -115,6 +116,12 @@ export const getPageInSpace = (state: GlobalState, spaceId: string, id: string):
     return page?.space_id === spaceId ? page : undefined;
 };
 
+// Whether `id` is `rootId` or sits beneath it. Deleting a page deletes its
+// subpages too, so a viewer on any page in the subtree — not just the one being
+// deleted — is about to lose what they're looking at.
+export const isPageInSubtree = (state: GlobalState, rootId: string, id: string): boolean =>
+    collectSubtreeIds(getPagesById(state), rootId).has(id);
+
 // Whether a space's member list has been loaded. A space always has at least its
 // creator, so a count of 0 means "not loaded (or the request failed)" rather than
 // "no members" — consumers need to tell those apart before rendering a number.

From 0d3e455d2f47fefb94875a9900a918189e48e8ce Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 16:37:46 -0500
Subject: [PATCH 54/68] fix(docs): place a reordered page where it was dropped
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The optimistic reindex numbered a sibling group 0-based while the server
numbers it 1-based, and a move's response upserts only the moved page. That
page therefore landed among its siblings one number high, tying with the one
below it, and the title tiebreak resolved the tie against it — so a page
dropped between two siblings settled one position too low.

Numbering now matches the server, and the moved page's old group is left
alone rather than closed up, since store.MovePage reindexes the destination
group only.

Prompt: when dropping an item between two root pages, it will be placed +1
down from where it should be
---
 webapp/src/store/entities.test.ts | 73 ++++++++++++++++++++++---------
 webapp/src/store/entities.ts      | 33 +++++++-------
 2 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/webapp/src/store/entities.test.ts b/webapp/src/store/entities.test.ts
index 92a42a8..fc3273f 100644
--- a/webapp/src/store/entities.test.ts
+++ b/webapp/src/store/entities.test.ts
@@ -105,9 +105,41 @@ describe('pages', () => {
             siblingIndex: 0,
         });
 
-        expect(afterMove.pages.c.sort_order).toBe(0);
-        expect(afterMove.pages.a.sort_order).toBe(1);
-        expect(afterMove.pages.b.sort_order).toBe(2);
+        expect(afterMove.pages.c.sort_order).toBe(1);
+        expect(afterMove.pages.a.sort_order).toBe(2);
+        expect(afterMove.pages.b.sort_order).toBe(3);
+    });
+
+    // The move response upserts only the moved page, carrying the server's
+    // sort_order. Numbered on a different base from its siblings it tied with the
+    // one below it, and the title tiebreak put it back a slot — a drop between two
+    // roots landed one position too low.
+    it('MOVED_PAGE survives the server echoing the moved page back', () => {
+        const a = withParent('a', '', 'A', 1);
+        const b = withParent('b', '', 'B', 2);
+        const c = withParent('c', '', 'C', 3);
+
+        const afterReceive = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [a, b, c]});
+
+        // Drop C between A and B.
+        const afterMove = reducer(afterReceive, {
+            type: PageTypes.MOVED_PAGE,
+            pageId: 'c',
+            spaceId: 'space-a',
+            parentId: '',
+            siblingIndex: 1,
+        });
+
+        // What the server's reindex assigns C for that position, 1-based.
+        const echoed = {...afterMove.pages.c, sort_order: 2};
+        const afterEcho = reducer(afterMove, {type: PageTypes.RECEIVED_PAGES, pages: [echoed]});
+
+        const rootOrder = ['a', 'b', 'c'].
+            map((id) => afterEcho.pages[id]).
+            sort((x, y) => x.sort_order - y.sort_order || x.title.localeCompare(y.title)).
+            map((page) => page.id);
+
+        expect(rootOrder).toEqual(['a', 'c', 'b']);
     });
 
     it('DELETED_PAGE prunes the page and its subtree from byId and the space index', () => {
@@ -144,39 +176,40 @@ describe('collectSubtreeIds', () => {
 });
 
 describe('reindexAfterMove', () => {
-    it('reorders siblings within the same parent (0-based)', () => {
+    it('reorders siblings within the same parent, numbered 1-based like the server', () => {
         const byId = {
-            a: withParent('a', '', 'A', 0),
-            b: withParent('b', '', 'B', 1),
-            c: withParent('c', '', 'C', 2),
+            a: withParent('a', '', 'A', 1),
+            b: withParent('b', '', 'B', 2),
+            c: withParent('c', '', 'C', 3),
         };
 
         // Move A to the end.
         const next = reindexAfterMove(byId, 'a', 'space-a', '', 2);
 
-        expect(next.b.sort_order).toBe(0);
-        expect(next.c.sort_order).toBe(1);
-        expect(next.a.sort_order).toBe(2);
+        expect(next.b.sort_order).toBe(1);
+        expect(next.c.sort_order).toBe(2);
+        expect(next.a.sort_order).toBe(3);
         expect(next.a.parent_id).toBe('');
     });
 
-    it('reparents a page and reindexes both the old and new sibling groups', () => {
+    it('reparents a page and reindexes the destination group only', () => {
         const byId = {
-            p: withParent('p', '', 'Parent', 0),
-            a: withParent('a', '', 'A', 1),
-            b: withParent('b', '', 'B', 2),
-            x: withParent('x', 'p', 'X', 0),
+            p: withParent('p', '', 'Parent', 1),
+            a: withParent('a', '', 'A', 2),
+            b: withParent('b', '', 'B', 3),
+            x: withParent('x', 'p', 'X', 1),
         };
 
         // Move B under P as its first child.
         const next = reindexAfterMove(byId, 'b', 'space-a', 'p', 0);
 
         expect(next.b.parent_id).toBe('p');
-        expect(next.b.sort_order).toBe(0);
-        expect(next.x.sort_order).toBe(1);
+        expect(next.b.sort_order).toBe(1);
+        expect(next.x.sort_order).toBe(2);
 
-        // Old root group renumbers to fill the gap.
-        expect(next.p.sort_order).toBe(0);
-        expect(next.a.sort_order).toBe(1);
+        // The old group keeps its numbering, gap included, as the server does —
+        // closing it up here would disagree with any page later refetched from it.
+        expect(next.p.sort_order).toBe(1);
+        expect(next.a.sort_order).toBe(2);
     });
 });
diff --git a/webapp/src/store/entities.ts b/webapp/src/store/entities.ts
index 8fcef5c..2f73055 100644
--- a/webapp/src/store/entities.ts
+++ b/webapp/src/store/entities.ts
@@ -25,10 +25,21 @@ type ReceivedSpaceMembersAction = {spaceId: string; userIds: string[]};
 const bySortOrder = (a: Page, b: Page): number =>
     a.sort_order - b.sort_order || a.title.localeCompare(b.title);
 
-// Moves a page under `newParentId` at `siblingIndex` and renumbers the affected
-// sibling groups' sort_order 0-based, mirroring the server's reindex. Returns a
-// new byId map (untouched pages are shared by reference). Only pages in
-// `spaceId` are considered; a pure reorder (same parent) skips the old group.
+// Moves a page under `newParentId` at `siblingIndex` and renumbers the destination
+// sibling group's sort_order, mirroring the server's reindex. Returns a new byId
+// map (untouched pages are shared by reference). Only pages in `spaceId` are
+// considered.
+//
+// Two details exist to match the server exactly, because the move's response
+// upserts only the moved page: whatever this function writes has to survive that
+// merge sitting next to it. Diverge and the merged page ties with a sibling, where
+// the title tiebreak silently drops it a slot.
+//
+//  - Numbering is 1-based, as the server's is: store.reindexSiblingGroup writes
+//    i+1 and nextSortOrder appends MAX+1.
+//  - The page's old group is left alone rather than closed up, because
+//    store.MovePage reindexes the destination group only. The gap the page leaves
+//    behind is what the server has, and order doesn't depend on contiguity.
 export function reindexAfterMove(
     byId: Record<string, Page>,
     pageId: string,
@@ -40,26 +51,18 @@ export function reindexAfterMove(
     if (!moved) {
         return byId;
     }
-    const oldParentId = moved.parent_id;
     const next = {...byId};
 
-    const groupOf = (parentId: string): Page[] => Object.values(byId).
-        filter((page) => page.space_id === spaceId && page.parent_id === parentId && page.id !== pageId).
+    const newGroup = Object.values(byId).
+        filter((page) => page.space_id === spaceId && page.parent_id === newParentId && page.id !== pageId).
         sort(bySortOrder);
 
-    const newGroup = groupOf(newParentId);
     const index = Math.max(0, Math.min(siblingIndex, newGroup.length));
     newGroup.splice(index, 0, moved);
     newGroup.forEach((page, i) => {
-        next[page.id] = {...page, parent_id: newParentId, sort_order: i};
+        next[page.id] = {...page, parent_id: newParentId, sort_order: i + 1};
     });
 
-    if (oldParentId !== newParentId) {
-        groupOf(oldParentId).forEach((page, i) => {
-            next[page.id] = {...page, sort_order: i};
-        });
-    }
-
     return next;
 }
 

From d12fb17a10877ec353d4356ef4981635ee15c72a Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 16:40:31 -0500
Subject: [PATCH 55/68] feat(docs): open a newly created page in edit mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A new page is empty and titled "Untitled", so reading it is never what was
wanted — creating one now routes to ?edit=1, which also focuses the title
input, the first thing to fill in.

Prompt: when a page is created, let's default enter into edit mode
---
 webapp/src/hooks/pages.test.tsx | 76 ++++++++++++++++++++++++++++++++-
 webapp/src/hooks/pages.ts       | 13 +++---
 2 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/webapp/src/hooks/pages.test.tsx b/webapp/src/hooks/pages.test.tsx
index 976b526..e639be7 100644
--- a/webapp/src/hooks/pages.test.tsx
+++ b/webapp/src/hooks/pages.test.tsx
@@ -1,29 +1,50 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {renderHook} from '@testing-library/react';
+import {act, renderHook} from '@testing-library/react';
 import React from 'react';
 import {IntlProvider} from 'react-intl';
 import {Provider} from 'react-redux';
 
 import {makePage, makeSpace} from 'store/test_fixtures';
 
+import {toast} from 'components/toast';
+
 import {SPACE_PROP_DEFAULT_PAGE_ID} from 'types/docs';
 import type {Page, Space} from 'types/docs';
 
-import {useDefaultPagePath} from './pages';
+import {useCreateRootPage, useDefaultPagePath} from './pages';
 
 import {makeTestStore} from '../../tests/react_testing_utils';
 
 let mockRoute: {pageId?: string; isOverview: boolean} = {isOverview: false};
+const mockGoToPage = jest.fn();
+const mockGoToEditPage = jest.fn();
 
 jest.mock('hooks/navigation', () => ({
     useDocsNavigation: () => ({
         ...mockRoute,
+        goToPage: mockGoToPage,
+        goToEditPage: mockGoToEditPage,
         paths: {page: (spaceId: string, pageId: string) => `/docs/${spaceId}/${pageId}`},
     }),
 }));
 
+const mockCreatePage = jest.fn();
+let mockCreateResult: Promise<Page> = Promise.resolve(makePage('new', 'eng', 'Untitled'));
+
+// createPage is a thunk the hook awaits for the created page, so the mock has to
+// be a thunk that resolves to one too.
+jest.mock('store/actions', () => ({
+    ...jest.requireActual('store/actions'),
+    createPage: (...args: unknown[]) => {
+        mockCreatePage(...args as []);
+        return async () => mockCreateResult;
+    },
+}));
+
+jest.mock('components/toast', () => ({toast: {error: jest.fn()}}));
+
 const withDefault = (pageId: string): Space => ({
     ...makeSpace('eng', 'Engineering'),
     props: {[SPACE_PROP_DEFAULT_PAGE_ID]: pageId},
@@ -89,3 +110,54 @@ describe('useDefaultPagePath', () => {
         expect(render(makeSpace('eng', 'Engineering'), [])).toBeUndefined();
     });
 });
+
+describe('useCreateRootPage', () => {
+    const renderCreate = () => {
+        const store = makeTestStore();
+
+        const wrapper = ({children}: {children: React.ReactNode}) => (
+            <Provider store={store}>
+                <IntlProvider
+                    locale='en'
+                    messages={{}}
+                >
+                    {children}
+                </IntlProvider>
+            </Provider>
+        );
+
+        return renderHook(() => useCreateRootPage('eng'), {wrapper}).result;
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockCreateResult = Promise.resolve(makePage('new', 'eng', 'Untitled'));
+    });
+
+    // A new page is empty and titled "Untitled", so landing on it in reading mode
+    // means a second click before anything can be written.
+    it('opens the new page in edit mode', async () => {
+        const create = renderCreate();
+
+        await act(async () => {
+            await create.current();
+        });
+
+        expect(mockGoToEditPage).toHaveBeenCalledWith('eng', 'new');
+        expect(mockGoToPage).not.toHaveBeenCalled();
+    });
+
+    it('surfaces a failure without navigating', async () => {
+        mockCreateResult = Promise.reject(new Error('nope'));
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        const create = renderCreate();
+
+        await act(async () => {
+            await create.current();
+        });
+
+        expect(toast.error).toHaveBeenCalled();
+        expect(mockGoToEditPage).not.toHaveBeenCalled();
+    });
+});
diff --git a/webapp/src/hooks/pages.ts b/webapp/src/hooks/pages.ts
index a154b3c..d4cdbae 100644
--- a/webapp/src/hooks/pages.ts
+++ b/webapp/src/hooks/pages.ts
@@ -16,19 +16,22 @@ import {useDocsNavigation} from './navigation';
 import {useAppDispatch, useAppSelector} from './redux';
 
 /**
- * Returns a handler that creates a top-level page in the space and navigates to
- * it. Shared by the page header's add button and the page tree's "Add page".
+ * Returns a handler that creates a top-level page in the space and opens it in
+ * edit mode. Shared by the page header's add button and the page tree's "Add
+ * page". A new page is empty and titled "Untitled", so reading it is never what
+ * was wanted; edit mode also focuses the title, which is the first thing to fill
+ * in.
  */
 export function useCreateRootPage(spaceId: string) {
     const dispatch = useAppDispatch();
-    const {goToPage} = useDocsNavigation();
+    const {goToEditPage} = useDocsNavigation();
     const {formatMessage} = useIntl();
     const untitled = formatMessage({id: 'docs.pageTree.untitled', defaultMessage: 'Untitled'});
 
     return useCallback(async () => {
         try {
             const page = await dispatch(createPage(spaceId, {title: untitled}));
-            goToPage(spaceId, page.id);
+            goToEditPage(spaceId, page.id);
         } catch (error) {
             // Without this the add-page buttons look inert on failure.
             toast.error(formatMessage({id: 'docs.pageTree.addFailed', defaultMessage: 'Could not create the page. Please try again.'}));
@@ -36,7 +39,7 @@ export function useCreateRootPage(spaceId: string) {
             // eslint-disable-next-line no-console
             console.error('Docs: failed to create page', error);
         }
-    }, [dispatch, spaceId, untitled, goToPage, formatMessage]);
+    }, [dispatch, spaceId, untitled, goToEditPage, formatMessage]);
 }
 
 /**

From 484cd5898b5371f41f84d796f5c273c0e5d3fe4c Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 16:48:47 -0500
Subject: [PATCH 56/68] fix(docs): replace rather than push when creating a
 page

Opening the new page's edit URL took over the entry for wherever the add
button was clicked, instead of stacking on top of it.

Prompt: creation should replace, not push
---
 webapp/src/hooks/navigation.test.tsx | 16 ++++++++++++++++
 webapp/src/hooks/navigation.ts       | 13 ++++++++++++-
 webapp/src/hooks/pages.test.tsx      |  2 +-
 webapp/src/hooks/pages.ts            |  2 +-
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/webapp/src/hooks/navigation.test.tsx b/webapp/src/hooks/navigation.test.tsx
index 76876a8..b94c2fa 100644
--- a/webapp/src/hooks/navigation.test.tsx
+++ b/webapp/src/hooks/navigation.test.tsx
@@ -22,6 +22,10 @@ function Probe() {
                     data-testid='go-edit'
                     onClick={() => goToEditPage('space1', 'pageX')}
                 />
+                <button
+                    data-testid='go-edit-replace'
+                    onClick={() => goToEditPage('space1', 'pageX', {replace: true})}
+                />
             </li>
         </ul>
     );
@@ -102,6 +106,18 @@ describe('useDocsNavigation goToEditPage', () => {
         expect(history.location.pathname + history.location.search).toBe('/myteam/spaces/space1/pageX?edit=1');
         expect(history.length).toBe(2);
     });
+
+    it('replaces the current entry when asked, leaving nothing to go back to', () => {
+        const {history} = renderWithContext(<Probe/>, {
+            route: '/myteam/spaces/space1',
+            state: {currentTeam: {id: 't1', name: 'myteam'}},
+        });
+
+        fireEvent.click(screen.getByTestId('go-edit-replace'));
+
+        expect(history.location.pathname + history.location.search).toBe('/myteam/spaces/space1/pageX?edit=1');
+        expect(history.length).toBe(1);
+    });
 });
 
 function ToggleProbe({spaceId}: {spaceId: string}) {
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index ae5308b..9282dc8 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -50,7 +50,18 @@ export function useDocsNavigation() {
     }, [history, teamName]);
     const goToPage = useCallback((space: string, page: string) => history.push(pagePath(teamName, space, page)), [history, teamName]);
     const goToDraft = useCallback((space: string, page: string) => history.push(draftPath(teamName, space, page)), [history, teamName]);
-    const goToEditPage = useCallback((space: string, page: string) => history.push(editPagePath(teamName, space, page)), [history, teamName]);
+
+    // `replace` for an edit session that is the point of the navigation rather than
+    // a mode change on a page the user was already reading — creating a page, where
+    // the click that opened it isn't a place to go back to.
+    const goToEditPage = useCallback((space: string, page: string, {replace = false} = {}) => {
+        const path = editPagePath(teamName, space, page);
+        if (replace) {
+            history.replace(path);
+        } else {
+            history.push(path);
+        }
+    }, [history, teamName]);
     const goToOverview = useCallback((space: string) => history.push(overviewPath(teamName, space)), [history, teamName]);
     const goHome = useCallback(() => history.push(docsHomePath(teamName)), [history, teamName]);
     const navigate = useCallback((space: string, page?: string) => history.push(docsPath(teamName, space, page)), [history, teamName]);
diff --git a/webapp/src/hooks/pages.test.tsx b/webapp/src/hooks/pages.test.tsx
index e639be7..6785f0c 100644
--- a/webapp/src/hooks/pages.test.tsx
+++ b/webapp/src/hooks/pages.test.tsx
@@ -143,7 +143,7 @@ describe('useCreateRootPage', () => {
             await create.current();
         });
 
-        expect(mockGoToEditPage).toHaveBeenCalledWith('eng', 'new');
+        expect(mockGoToEditPage).toHaveBeenCalledWith('eng', 'new', {replace: true});
         expect(mockGoToPage).not.toHaveBeenCalled();
     });
 
diff --git a/webapp/src/hooks/pages.ts b/webapp/src/hooks/pages.ts
index d4cdbae..c3b410a 100644
--- a/webapp/src/hooks/pages.ts
+++ b/webapp/src/hooks/pages.ts
@@ -31,7 +31,7 @@ export function useCreateRootPage(spaceId: string) {
     return useCallback(async () => {
         try {
             const page = await dispatch(createPage(spaceId, {title: untitled}));
-            goToEditPage(spaceId, page.id);
+            goToEditPage(spaceId, page.id, {replace: true});
         } catch (error) {
             // Without this the add-page buttons look inert on failure.
             toast.error(formatMessage({id: 'docs.pageTree.addFailed', defaultMessage: 'Could not create the page. Please try again.'}));

From ddb140cc8247a907ac33a5ce3d31b13d59ce569c Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 16:50:15 -0500
Subject: [PATCH 57/68] Revert "fix(docs): replace rather than push when
 creating a page"

This reverts commit 484cd5898b5371f41f84d796f5c273c0e5d3fe4c.
---
 webapp/src/hooks/navigation.test.tsx | 16 ----------------
 webapp/src/hooks/navigation.ts       | 13 +------------
 webapp/src/hooks/pages.test.tsx      |  2 +-
 webapp/src/hooks/pages.ts            |  2 +-
 4 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/webapp/src/hooks/navigation.test.tsx b/webapp/src/hooks/navigation.test.tsx
index b94c2fa..76876a8 100644
--- a/webapp/src/hooks/navigation.test.tsx
+++ b/webapp/src/hooks/navigation.test.tsx
@@ -22,10 +22,6 @@ function Probe() {
                     data-testid='go-edit'
                     onClick={() => goToEditPage('space1', 'pageX')}
                 />
-                <button
-                    data-testid='go-edit-replace'
-                    onClick={() => goToEditPage('space1', 'pageX', {replace: true})}
-                />
             </li>
         </ul>
     );
@@ -106,18 +102,6 @@ describe('useDocsNavigation goToEditPage', () => {
         expect(history.location.pathname + history.location.search).toBe('/myteam/spaces/space1/pageX?edit=1');
         expect(history.length).toBe(2);
     });
-
-    it('replaces the current entry when asked, leaving nothing to go back to', () => {
-        const {history} = renderWithContext(<Probe/>, {
-            route: '/myteam/spaces/space1',
-            state: {currentTeam: {id: 't1', name: 'myteam'}},
-        });
-
-        fireEvent.click(screen.getByTestId('go-edit-replace'));
-
-        expect(history.location.pathname + history.location.search).toBe('/myteam/spaces/space1/pageX?edit=1');
-        expect(history.length).toBe(1);
-    });
 });
 
 function ToggleProbe({spaceId}: {spaceId: string}) {
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index 9282dc8..ae5308b 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -50,18 +50,7 @@ export function useDocsNavigation() {
     }, [history, teamName]);
     const goToPage = useCallback((space: string, page: string) => history.push(pagePath(teamName, space, page)), [history, teamName]);
     const goToDraft = useCallback((space: string, page: string) => history.push(draftPath(teamName, space, page)), [history, teamName]);
-
-    // `replace` for an edit session that is the point of the navigation rather than
-    // a mode change on a page the user was already reading — creating a page, where
-    // the click that opened it isn't a place to go back to.
-    const goToEditPage = useCallback((space: string, page: string, {replace = false} = {}) => {
-        const path = editPagePath(teamName, space, page);
-        if (replace) {
-            history.replace(path);
-        } else {
-            history.push(path);
-        }
-    }, [history, teamName]);
+    const goToEditPage = useCallback((space: string, page: string) => history.push(editPagePath(teamName, space, page)), [history, teamName]);
     const goToOverview = useCallback((space: string) => history.push(overviewPath(teamName, space)), [history, teamName]);
     const goHome = useCallback(() => history.push(docsHomePath(teamName)), [history, teamName]);
     const navigate = useCallback((space: string, page?: string) => history.push(docsPath(teamName, space, page)), [history, teamName]);
diff --git a/webapp/src/hooks/pages.test.tsx b/webapp/src/hooks/pages.test.tsx
index 6785f0c..e639be7 100644
--- a/webapp/src/hooks/pages.test.tsx
+++ b/webapp/src/hooks/pages.test.tsx
@@ -143,7 +143,7 @@ describe('useCreateRootPage', () => {
             await create.current();
         });
 
-        expect(mockGoToEditPage).toHaveBeenCalledWith('eng', 'new', {replace: true});
+        expect(mockGoToEditPage).toHaveBeenCalledWith('eng', 'new');
         expect(mockGoToPage).not.toHaveBeenCalled();
     });
 
diff --git a/webapp/src/hooks/pages.ts b/webapp/src/hooks/pages.ts
index c3b410a..d4cdbae 100644
--- a/webapp/src/hooks/pages.ts
+++ b/webapp/src/hooks/pages.ts
@@ -31,7 +31,7 @@ export function useCreateRootPage(spaceId: string) {
     return useCallback(async () => {
         try {
             const page = await dispatch(createPage(spaceId, {title: untitled}));
-            goToEditPage(spaceId, page.id, {replace: true});
+            goToEditPage(spaceId, page.id);
         } catch (error) {
             // Without this the add-page buttons look inert on failure.
             toast.error(formatMessage({id: 'docs.pageTree.addFailed', defaultMessage: 'Could not create the page. Please try again.'}));

From 9d8c198890694ec38bdf81f20eaff41ad5986585 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 17:00:23 -0500
Subject: [PATCH 58/68] feat(docs): edit an unnamed page's title as a
 placeholder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The server rejects an empty title, so a created page stores the literal
"Untitled" — which meant naming a new page started by selecting and clearing
that word. The title field now shows an unnamed page as empty with
"Untitled" as its placeholder, and maps back on write: clearing the field
returns the page to unnamed rather than failing validation.

The sentinel moves to one shared descriptor, so the string that gets stored
and the string recognized as "unnamed" cannot drift apart. It needs
defineMessage to stay extractable.

Also corrects a test that claimed the server accepts an empty title.

Prompt: Do pages support empty string titles? Having more of a placeholder
UX in edit mode would be better (so users don't need to highlight 'Untitled'
to clear)
---
 webapp/i18n/en.json                           |  1 -
 .../page_content/page_content.test.tsx        | 39 ++++++++++++++++++-
 .../space_view/page_content/page_content.tsx  | 36 +++++++++++------
 .../space_view/page_content/page_title.tsx    |  4 +-
 webapp/src/hooks/pages.ts                     |  4 +-
 webapp/src/types/docs.ts                      | 13 +++++++
 6 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index b2d271b..7c6a09b 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -104,7 +104,6 @@
   "docs.pageTree.nestBlocked": "Cannot nest {title} deeper than {levels} levels.",
   "docs.pageTree.overview": "Overview",
   "docs.pageTree.topLevel": "top level",
-  "docs.pageTree.untitled": "Untitled",
   "docs.renamePage.confirm": "Save",
   "docs.renamePage.label": "Page name",
   "docs.renamePage.title": "Rename page",
diff --git a/webapp/src/components/space_view/page_content/page_content.test.tsx b/webapp/src/components/space_view/page_content/page_content.test.tsx
index 22e60af..effee9c 100644
--- a/webapp/src/components/space_view/page_content/page_content.test.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.test.tsx
@@ -24,6 +24,9 @@ jest.mock('hooks/members', () => ({useUserProfile: () => undefined}));
 
 const PAGE = makePage('runbook', 'eng', 'Runbook');
 
+// What creating a page stores, since the server has no empty-title representation.
+const UNNAMED_PAGE = makePage('fresh', 'eng', 'Untitled');
+
 const content = (props: Partial<React.ComponentProps<typeof PageContent>> = {}) => (
     <PageContent
         page={PAGE}
@@ -42,6 +45,34 @@ describe('PageContent title commit', () => {
         mockToastError.mockReset();
     });
 
+    // The whole point of the placeholder treatment: a page nobody has named yet
+    // opens with an empty field, so typing a name doesn't start with clearing one.
+    it('presents an unnamed page as an empty field, not the literal placeholder', () => {
+        renderWithContext(content({page: UNNAMED_PAGE}));
+
+        expect(field()).toHaveValue('');
+        expect(field()).toHaveAttribute('placeholder', 'Untitled');
+    });
+
+    it('writes a name typed over the placeholder', async () => {
+        renderWithContext(content({page: UNNAMED_PAGE}));
+
+        fireEvent.change(field(), {target: {value: 'Runbooks'}});
+        fireEvent.keyDown(field(), {key: 'Enter'});
+
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'fresh', {title: 'Runbooks'}));
+    });
+
+    // Leaving a fresh page untouched must not look like a rename back to the same
+    // value; the buffer is empty while the stored title isn't.
+    it('does not write when an unnamed page is left unnamed', () => {
+        renderWithContext(content({page: UNNAMED_PAGE}));
+
+        fireEvent.keyDown(field(), {key: 'Enter'});
+
+        expect(mockUpdatePage).not.toHaveBeenCalled();
+    });
+
     it('does not write while typing', () => {
         renderContent();
 
@@ -76,13 +107,17 @@ describe('PageContent title commit', () => {
         expect(mockUpdatePage).not.toHaveBeenCalled();
     });
 
-    it('writes an emptied title, which the server accepts', async () => {
+    // The server rejects an empty title, so clearing the field returns the page to
+    // unnamed by storing the placeholder — and the field stays empty, since that is
+    // how unnamed is presented.
+    it('stores the untitled placeholder when the field is emptied', async () => {
         renderContent();
 
         fireEvent.change(field(), {target: {value: ''}});
         fireEvent.keyDown(field(), {key: 'Enter'});
 
-        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'runbook', {title: ''}));
+        await waitFor(() => expect(mockUpdatePage).toHaveBeenCalledWith('eng', 'runbook', {title: 'Untitled'}));
+        expect(field()).toHaveValue('');
     });
 
     it('reverts on Escape without writing', () => {
diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
index 719d3e8..f9ef3c8 100644
--- a/webapp/src/components/space_view/page_content/page_content.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -17,6 +17,7 @@ import {Button} from 'components/form_controls/button';
 import PageEditor from 'components/page_editor/page_editor';
 import {toast} from 'components/toast';
 
+import {UNTITLED_PAGE_TITLE} from 'types/docs';
 import type {Page} from 'types/docs';
 
 import styles from './page_content.module.scss';
@@ -72,9 +73,19 @@ const PageContent = ({page, editing}: Props) => {
 const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     const {formatMessage} = useIntl();
     const author = useUserProfile(page.user_id);
-    const [title, setTitle] = useState(page.title);
     const dispatch = useAppDispatch();
 
+    const untitled = formatMessage(UNTITLED_PAGE_TITLE);
+
+    // An unnamed page stores the untitled placeholder as its title, because the
+    // server has no empty-title representation. The field shows that as nothing at
+    // all, so typing a name replaces it without selecting it first; `stored` maps
+    // back for the write.
+    const asBuffer = useCallback((stored: string) => (stored === untitled ? '' : stored), [untitled]);
+    const asStored = (buffer: string) => buffer.trim() || untitled;
+
+    const [title, setTitle] = useState(() => asBuffer(page.title));
+
     // Commit runs from an effect cleanup and from a settled write, neither of which
     // can see the render they were created in; the ref is the buffer as it is now.
     const titleRef = useRef(title);
@@ -94,26 +105,29 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     // else means there is unsaved input, which an incoming title must not replace —
     // including the title our own write just put in the store, since the user may
     // have typed on while it was in flight.
-    const observedTitle = useRef(page.title);
+    const observedTitle = useRef(asBuffer(page.title));
     useEffect(() => {
         const previous = observedTitle.current;
-        observedTitle.current = page.title;
+        observedTitle.current = asBuffer(page.title);
         if (titleRef.current === previous) {
-            setBuffer(page.title);
+            setBuffer(observedTitle.current);
         }
-    }, [page.title, setBuffer]);
+    }, [page.title, asBuffer, setBuffer]);
 
     // Deferred callers reach commit through the ref so they run the current one,
     // which reads today's page.title rather than the one their closure captured.
     const commitRef = useRef<() => Promise<void>>();
 
     // Trailing whitespace is never intentional in a title, and a title that only
-    // changed by whitespace is not a change worth a write.
+    // changed by whitespace is not a change worth a write. Clearing the field is a
+    // return to unnamed rather than an error: it stores the placeholder, and the
+    // field stays empty because that is how unnamed reads here.
     const commit = async () => {
-        const next = titleRef.current.trim();
-        if (next !== titleRef.current) {
-            setBuffer(next);
+        const typed = titleRef.current.trim();
+        if (typed !== titleRef.current) {
+            setBuffer(typed);
         }
+        const next = asStored(typed);
         if (next === page.title || commitInFlight.current) {
             return;
         }
@@ -136,7 +150,7 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
         // Anything typed while that write was in flight was turned away by the
         // guard above and would otherwise be lost. One extra write per round trip
         // at most, and the last thing typed is the one that lands.
-        if (titleRef.current.trim() !== next) {
+        if (titleRef.current.trim() !== typed) {
             await commitRef.current?.();
         }
     };
@@ -184,7 +198,7 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
                 editing={editing}
                 onChange={setBuffer}
                 onCommit={commit}
-                onCancel={() => setBuffer(page.title)}
+                onCancel={() => setBuffer(asBuffer(page.title))}
             />
 
             {author?.displayName && (
diff --git a/webapp/src/components/space_view/page_content/page_title.tsx b/webapp/src/components/space_view/page_content/page_title.tsx
index a61767d..d50823f 100644
--- a/webapp/src/components/space_view/page_content/page_title.tsx
+++ b/webapp/src/components/space_view/page_content/page_title.tsx
@@ -6,6 +6,8 @@ import classNames from 'classnames';
 import React from 'react';
 import {useIntl} from 'react-intl';
 
+import {UNTITLED_PAGE_TITLE} from 'types/docs';
+
 import styles from './page_title.module.scss';
 
 // The server's model.PageTitleMaxRunes.
@@ -30,7 +32,7 @@ type Props = {
  */
 const PageTitle = ({value, editing, onChange, onCommit, onCancel}: Props) => {
     const {formatMessage} = useIntl();
-    const untitled = formatMessage({id: 'docs.page.untitled', defaultMessage: 'Untitled'});
+    const untitled = formatMessage(UNTITLED_PAGE_TITLE);
 
     if (!editing) {
         return (
diff --git a/webapp/src/hooks/pages.ts b/webapp/src/hooks/pages.ts
index d4cdbae..4101844 100644
--- a/webapp/src/hooks/pages.ts
+++ b/webapp/src/hooks/pages.ts
@@ -9,7 +9,7 @@ import {getPage} from 'store/selectors';
 
 import {toast} from 'components/toast';
 
-import {SPACE_PROP_DEFAULT_PAGE_ID} from 'types/docs';
+import {SPACE_PROP_DEFAULT_PAGE_ID, UNTITLED_PAGE_TITLE} from 'types/docs';
 import type {Space} from 'types/docs';
 
 import {useDocsNavigation} from './navigation';
@@ -26,7 +26,7 @@ export function useCreateRootPage(spaceId: string) {
     const dispatch = useAppDispatch();
     const {goToEditPage} = useDocsNavigation();
     const {formatMessage} = useIntl();
-    const untitled = formatMessage({id: 'docs.pageTree.untitled', defaultMessage: 'Untitled'});
+    const untitled = formatMessage(UNTITLED_PAGE_TITLE);
 
     return useCallback(async () => {
         try {
diff --git a/webapp/src/types/docs.ts b/webapp/src/types/docs.ts
index 80d5288..0a492d4 100644
--- a/webapp/src/types/docs.ts
+++ b/webapp/src/types/docs.ts
@@ -1,6 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {defineMessage} from 'react-intl';
+
 // Whether a space is visible to the whole team or only invited members. Only
 // 'public' is selectable in the initial MVF — space-level permissions (and thus
 // private spaces) are not built yet.
@@ -58,6 +60,17 @@ export type UpdateSpacePatch = {
 // front door (hero).
 export const SPACE_PROP_DEFAULT_PAGE_ID = 'default_page_id';
 
+// The title a page carries while it has no name of its own. The server rejects an
+// empty title (validateTitle in server/app/service.go, and Page.IsValid), so
+// "unnamed" has to be a real stored string rather than "". One descriptor shared by
+// everything that writes it and everything that recognizes it: the title editor
+// shows it as placeholder text instead of a value, so naming a new page doesn't
+// start with clearing the old name, and a comparison against a different id's
+// translation of the same word would silently stop matching.
+// defineMessage, not a bare object: the extractor only sees a descriptor it can
+// read statically, and a shared one is never written inline at its call sites.
+export const UNTITLED_PAGE_TITLE = defineMessage({id: 'docs.page.untitled', defaultMessage: 'Untitled'});
+
 // Mirrors the server model (server/model/page.go). search_text, original_id, and
 // props exist on the server model too; add them as the editor lands.
 export type Page = {

From 783b5d2d04fd26a70d005daf278a9b52ff6f8213 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 19:19:07 -0500
Subject: [PATCH 59/68] feat(docs): add the drafts data and store layer

Drafts as a first-class slice, ported from PR #13's client onto this branch's
data-source seam so there is one transport rather than two.

- types/drafts.ts: Draft, DraftSummary, DraftPatch, publish conflict shapes
- DocsDataSource gains create/get/update/delete/list/publish for drafts; a
  missing draft normalizes to undefined rather than a 404 the caller catches
- PublishConflictError unpacks publish's 409, which uniquely carries data (the
  current server page), and distinguishes forceable conflicts from an
  unpublished parent, which force cannot fix
- drafts + draftsInSpace reducers, keyed by page id and kept separate from
  pages so one user's unpublished title cannot render in another's tree
- PUBLISHED_DRAFT is one action, removing the draft and adding the page
  together, so no render shows the new page twice
- selectors distinguish unpublished edits to a page from an orphan draft (an
  unpublished page), which is the duplicate-row trap encoded once

Thunks cover fetch/create/save/discard/publish. No UI consumes these yet.

Prompt: Back to Drafts DAL/Reducers/Selectors & interop/integration with Page
Tree and Pages DAL/hooks
---
 webapp/src/data/api_data_source.ts   |  41 +++++++-
 webapp/src/data/docs_data_source.ts  |  27 +++++
 webapp/src/data/publish_conflict.ts  |  48 +++++++++
 webapp/src/store/action_types.ts     |  11 ++
 webapp/src/store/actions.ts          |  82 ++++++++++++++-
 webapp/src/store/entities.test.ts    |  95 ++++++++++++++++-
 webapp/src/store/entities.ts         | 149 ++++++++++++++++++++++++++-
 webapp/src/store/reducer.test.ts     |   2 +
 webapp/src/store/selectors.test.ts   | 109 ++++++++++++++++----
 webapp/src/store/selectors.ts        |  56 ++++++++++
 webapp/src/store/test_fixtures.ts    |  18 ++++
 webapp/src/types/drafts.ts           |  86 ++++++++++++++++
 webapp/tests/react_testing_utils.tsx |   2 +
 13 files changed, 701 insertions(+), 25 deletions(-)
 create mode 100644 webapp/src/data/publish_conflict.ts
 create mode 100644 webapp/src/types/drafts.ts

diff --git a/webapp/src/data/api_data_source.ts b/webapp/src/data/api_data_source.ts
index 8783ed3..dd7ca0b 100644
--- a/webapp/src/data/api_data_source.ts
+++ b/webapp/src/data/api_data_source.ts
@@ -1,16 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {apiUrl, listAll, restDelete, restGet, restPatch, restPost} from 'client/rest';
+import {RestError, apiUrl, listAll, restDelete, restGet, restPatch, restPost} from 'client/rest';
 
 import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdatePagePatch, UpdateSpacePatch} from 'types/docs';
+import type {Draft, DraftPatch, DraftSummary} from 'types/drafts';
 
 import type {DocsDataSource} from './docs_data_source';
+import {asPublishConflict} from './publish_conflict';
 
 // Ids are server-generated and URL-safe today, so this is defense in depth: an id
 // that ever arrives malformed (or user-influenced) can't reshape the request path.
 const seg = encodeURIComponent;
 
+// A draft is addressed through its page, not by an id of its own.
+const draftUrl = (spaceId: string, pageId: string): string =>
+    `${apiUrl()}/spaces/${seg(spaceId)}/pages/${seg(pageId)}/draft`;
+
 // The server's page list returns summaries (no body/delete_at); fill the fields
 // the store's Page type needs so a summary is a valid, body-less Page.
 const toPage = (summary: Page): Page => ({
@@ -80,4 +86,37 @@ export const apiDataSource: DocsDataSource = {
     },
 
     deletePage: (spaceId, pageId) => restDelete<void>(`${apiUrl()}/spaces/${seg(spaceId)}/pages/${seg(pageId)}`),
+
+    createSpaceDraft: (spaceId, title, parentId) => restPost<Draft>(`${apiUrl()}/spaces/${seg(spaceId)}/drafts`, {
+        title,
+        parent_id: parentId,
+    }),
+
+    getPageDraft: async (spaceId, pageId, signal) => {
+        try {
+            return await restGet<Draft>(draftUrl(spaceId, pageId), signal);
+        } catch (error) {
+            // Having no draft is the common case, not an error worth propagating.
+            if (error instanceof RestError && error.status === 404) {
+                return undefined;
+            }
+            throw error;
+        }
+    },
+
+    updatePageDraft: (spaceId, pageId, patch: DraftPatch, signal) =>
+        restPatch<Draft>(draftUrl(spaceId, pageId), patch, signal),
+
+    deletePageDraft: (spaceId, pageId) => restDelete<void>(draftUrl(spaceId, pageId)),
+
+    listSpaceDrafts: (spaceId) =>
+        listAll<DraftSummary>((query) => `${apiUrl()}/spaces/${seg(spaceId)}/drafts?${query}`),
+
+    publishPageDraft: async (spaceId, pageId, force) => {
+        try {
+            return toPage(await restPost<Page>(`${draftUrl(spaceId, pageId)}/publish`, {force}));
+        } catch (error) {
+            return asPublishConflict(error);
+        }
+    },
 };
diff --git a/webapp/src/data/docs_data_source.ts b/webapp/src/data/docs_data_source.ts
index 89b37e6..994e9e0 100644
--- a/webapp/src/data/docs_data_source.ts
+++ b/webapp/src/data/docs_data_source.ts
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import type {CreatePageInput, CreateSpaceInput, Page, Space, SpaceMember, UpdatePagePatch, UpdateSpacePatch} from 'types/docs';
+import type {Draft, DraftPatch, DraftSummary} from 'types/drafts';
 
 // The seam between the store's thunks and the Docs server REST API. The
 // API-backed source implements this over the plugin's /api/v1 routes; the
@@ -63,4 +64,30 @@ export interface DocsDataSource {
 
     // Deletes (soft-deletes) a page and, on the server, its subpages.
     deletePage(spaceId: string, pageId: string): Promise<void>;
+
+    // Reserves a page id and creates a draft against it, for a page that does not
+    // exist yet. `parentId` is where the page will land on publish ('' = root).
+    createSpaceDraft(spaceId: string, title: string, parentId: string): Promise<Draft>;
+
+    // The caller's draft for a page, or undefined when they have none. Absence is a
+    // 404 on the wire and is normalized here: "no unpublished edits" is an ordinary
+    // answer, not a failure the caller should have to catch.
+    getPageDraft(spaceId: string, pageId: string, signal?: AbortSignal): Promise<Draft | undefined>;
+
+    // Autosave. Only the provided fields are sent; `base_edit_at` is ignored by the
+    // server after the draft's first write (it is write-once), so this cannot
+    // re-baseline an existing draft.
+    updatePageDraft(spaceId: string, pageId: string, patch: DraftPatch, signal?: AbortSignal): Promise<Draft>;
+
+    // Discards the caller's draft, leaving any published page untouched.
+    deletePageDraft(spaceId: string, pageId: string): Promise<void>;
+
+    // The caller's drafts across a space, newest first. Metadata only — fetch a
+    // draft by page id for its body.
+    listSpaceDrafts(spaceId: string): Promise<DraftSummary[]>;
+
+    // Publishes a draft into its page, creating that page when the draft is an
+    // orphan, and discards the draft. `force` overwrites a concurrent edit.
+    // Rejects with PublishConflictError on a 409 (see data/publish_conflict).
+    publishPageDraft(spaceId: string, pageId: string, force: boolean): Promise<Page>;
 }
diff --git a/webapp/src/data/publish_conflict.ts b/webapp/src/data/publish_conflict.ts
new file mode 100644
index 0000000..909d474
--- /dev/null
+++ b/webapp/src/data/publish_conflict.ts
@@ -0,0 +1,48 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {RestError} from 'client/rest';
+
+import type {Page} from 'types/docs';
+import {ConflictReason} from 'types/drafts';
+import type {ConflictReasonType, PublishConflict} from 'types/drafts';
+
+/**
+ * A publish the server refused because the page moved underneath the draft.
+ *
+ * Publish is the one Docs endpoint whose error body carries data — the current
+ * server page — so the rejection is unpacked into a typed error here rather than
+ * leaving every call site to reach into `RestError.body`.
+ */
+export class PublishConflictError extends Error {
+    reason: ConflictReasonType | string;
+
+    // The page as the server currently has it, or null when the re-read failed.
+    currentPage: Page | null;
+
+    constructor(conflict: PublishConflict) {
+        super(conflict.error?.message ?? 'Publish conflict');
+        this.name = 'PublishConflictError';
+        this.reason = conflict.error?.id ?? '';
+        this.currentPage = conflict.current_page ?? null;
+    }
+
+    // Force-publishing overwrites a concurrent edit, which is a choice the user can
+    // make. An unpublished parent is not: the parent has to be published first, so
+    // offering "publish anyway" there would just fail again.
+    get isForceable(): boolean {
+        return this.reason !== ConflictReason.ParentUnpublished;
+    }
+}
+
+const isPublishConflict = (body: unknown): body is PublishConflict =>
+    Boolean(body) && typeof body === 'object' && 'current_page' in (body as object);
+
+// Rethrows a publish rejection as PublishConflictError when it is one, and
+// unchanged otherwise.
+export function asPublishConflict(error: unknown): never {
+    if (error instanceof RestError && error.status === 409 && isPublishConflict(error.body)) {
+        throw new PublishConflictError(error.body);
+    }
+    throw error;
+}
diff --git a/webapp/src/store/action_types.ts b/webapp/src/store/action_types.ts
index c0f49f0..4b5a47e 100644
--- a/webapp/src/store/action_types.ts
+++ b/webapp/src/store/action_types.ts
@@ -15,3 +15,14 @@ export const PageTypes = {
     MOVED_PAGE: manifest.id + '_moved_page',
     DELETED_PAGE: manifest.id + '_deleted_page',
 } as const;
+
+export const DraftTypes = {
+    RECEIVED_DRAFTS: manifest.id + '_received_drafts',
+    RECEIVED_DRAFT: manifest.id + '_received_draft',
+    DELETED_DRAFT: manifest.id + '_deleted_draft',
+
+    // Compound on purpose: publishing removes the draft and adds the resulting page.
+    // As two actions the tree renders one frame holding both the draft row and the
+    // new page row, which reads as a duplicate.
+    PUBLISHED_DRAFT: manifest.id + '_published_draft',
+} as const;
diff --git a/webapp/src/store/actions.ts b/webapp/src/store/actions.ts
index 4f48ba5..a349001 100644
--- a/webapp/src/store/actions.ts
+++ b/webapp/src/store/actions.ts
@@ -9,9 +9,10 @@ import {getCurrentTeamId, getMyTeams} from 'mattermost-redux/selectors/entities/
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import type {CreatePageInput, CreateSpaceInput, Page, Space, UpdatePagePatch, UpdateSpacePatch} from 'types/docs';
+import type {Draft, DraftPatch} from 'types/drafts';
 import type {DocsThunkAction} from 'types/store';
 
-import {PageTypes, SpaceTypes} from './action_types';
+import {DraftTypes, PageTypes, SpaceTypes} from './action_types';
 import {collectSubtreeIds} from './entities';
 import {getPage, getPagesById, getSpace} from './selectors';
 
@@ -140,6 +141,85 @@ export function deletePage(spaceId: string, pageId: string): DocsThunkAction<Pro
     };
 }
 
+// The caller's drafts for a space. Seeds the index entry even when there are none,
+// so consumers can tell "no drafts" from "not fetched". A failed load leaves the
+// space's drafts unknown rather than pretending it has none.
+export function fetchDrafts(spaceId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch) => {
+        try {
+            const drafts = await docsDataSource.listSpaceDrafts(spaceId);
+            dispatch({type: DraftTypes.RECEIVED_DRAFTS, drafts, spaceId});
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to load drafts', error);
+        }
+    };
+}
+
+// Loads one draft with its body (the space list carries metadata only). Returns
+// the draft, or undefined when the page has none. Rejects on failure so the editor
+// can tell "no draft" apart from "could not tell".
+export function fetchPageDraft(spaceId: string, pageId: string, signal?: AbortSignal): DocsThunkAction<Promise<Draft | undefined>> {
+    return async (dispatch) => {
+        const draft = await docsDataSource.getPageDraft(spaceId, pageId, signal);
+        if (draft) {
+            dispatch({type: DraftTypes.RECEIVED_DRAFT, draft});
+        }
+        return draft;
+    };
+}
+
+/**
+ * Reserves a page id and creates a draft for a page that does not exist yet.
+ *
+ * `base_edit_at` stays 0 for the draft's lifetime, which is what marks it as a new
+ * page rather than an edit to an existing one.
+ */
+export function createDraft(spaceId: string, title: string, parentId = ''): DocsThunkAction<Promise<Draft>> {
+    return async (dispatch) => {
+        const draft = await docsDataSource.createSpaceDraft(spaceId, title, parentId);
+        dispatch({type: DraftTypes.RECEIVED_DRAFT, draft});
+        return draft;
+    };
+}
+
+// Autosave. The caller owns the debounce and the in-flight bookkeeping; this is
+// just the write and the store update.
+export function saveDraft(spaceId: string, pageId: string, patch: DraftPatch, signal?: AbortSignal): DocsThunkAction<Promise<Draft>> {
+    return async (dispatch) => {
+        const draft = await docsDataSource.updatePageDraft(spaceId, pageId, patch, signal);
+        dispatch({type: DraftTypes.RECEIVED_DRAFT, draft});
+        return draft;
+    };
+}
+
+// Discards unpublished work. For an orphan draft this destroys the unpublished page
+// outright; for an edit it leaves the published page as it was.
+export function discardDraft(spaceId: string, pageId: string): DocsThunkAction<Promise<void>> {
+    return async (dispatch) => {
+        await docsDataSource.deletePageDraft(spaceId, pageId);
+        dispatch({type: DraftTypes.DELETED_DRAFT, spaceId, pageId});
+    };
+}
+
+/**
+ * Publishes a draft into its page and removes the draft.
+ *
+ * One dispatch, not two: the tree reads pages and orphan drafts from the same
+ * render, so removing the draft and adding the page separately shows a frame with
+ * both — the new page appearing twice.
+ *
+ * Rejects with PublishConflictError when the page moved underneath the draft; the
+ * caller decides whether to offer force (see PublishConflictError.isForceable).
+ */
+export function publishDraft(spaceId: string, pageId: string, force = false): DocsThunkAction<Promise<Page>> {
+    return async (dispatch) => {
+        const page = await docsDataSource.publishPageDraft(spaceId, pageId, force);
+        dispatch({type: DraftTypes.PUBLISHED_DRAFT, spaceId, pageId, page});
+        return page;
+    };
+}
+
 // Loads a space's members (user ids) into the store, backing the member count.
 export function fetchSpaceMembers(spaceId: string): DocsThunkAction<Promise<void>> {
     return async (dispatch) => {
diff --git a/webapp/src/store/entities.test.ts b/webapp/src/store/entities.test.ts
index fc3273f..c4777ae 100644
--- a/webapp/src/store/entities.test.ts
+++ b/webapp/src/store/entities.test.ts
@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {PageTypes, SpaceTypes} from './action_types';
+import {DraftTypes, PageTypes, SpaceTypes} from './action_types';
 import reducer, {collectSubtreeIds, reindexAfterMove} from './entities';
-import {makePage, makeSpace} from './test_fixtures';
+import {makeDraft, makePage, makeSpace} from './test_fixtures';
 
 const withParent = (id: string, parentId: string, title: string, sortOrder: number) => ({
     ...makePage(id, 'space-a', title, sortOrder),
@@ -161,6 +161,97 @@ describe('pages', () => {
     });
 });
 
+describe('drafts', () => {
+    const initialState = reducer(undefined, {type: '@@INIT'});
+
+    it('RECEIVED_DRAFTS keys drafts by page id and indexes them by space', () => {
+        const one = makeDraft('p1', 'space-a', 'One');
+        const two = makeDraft('p2', 'space-a', 'Two');
+
+        const next = reducer(initialState, {type: DraftTypes.RECEIVED_DRAFTS, drafts: [one, two], spaceId: 'space-a'});
+
+        expect(next.drafts).toEqual({p1: one, p2: two});
+        expect(next.draftsInSpace['space-a']).toEqual(new Set(['p1', 'p2']));
+    });
+
+    it('RECEIVED_DRAFTS marks a space loaded even when it has none', () => {
+        const next = reducer(initialState, {type: DraftTypes.RECEIVED_DRAFTS, drafts: [], spaceId: 'space-a'});
+
+        expect(next.draftsInSpace['space-a']).toEqual(new Set());
+    });
+
+    // The space list is a metadata projection with no body, so a refresh must not
+    // blank a body already fetched for that page.
+    it('RECEIVED_DRAFTS keeps a body the summary does not carry', () => {
+        const full = {...makeDraft('p1', 'space-a', 'One'), body: 'written'};
+        const loaded = reducer(initialState, {type: DraftTypes.RECEIVED_DRAFT, draft: full});
+
+        const summary = {...makeDraft('p1', 'space-a', 'One', 5)};
+        delete (summary as Partial<typeof summary>).body;
+        const next = reducer(loaded, {type: DraftTypes.RECEIVED_DRAFTS, drafts: [summary], spaceId: 'space-a'});
+
+        expect(next.drafts.p1.body).toBe('written');
+        expect(next.drafts.p1.update_at).toBe(5);
+    });
+
+    it('DELETED_DRAFT removes it from byId and the space index', () => {
+        const draft = makeDraft('p1', 'space-a', 'One');
+        const loaded = reducer(initialState, {type: DraftTypes.RECEIVED_DRAFTS, drafts: [draft], spaceId: 'space-a'});
+
+        const next = reducer(loaded, {type: DraftTypes.DELETED_DRAFT, spaceId: 'space-a', pageId: 'p1'});
+
+        expect(next.drafts).toEqual({});
+        expect(next.draftsInSpace['space-a']).toEqual(new Set());
+    });
+
+    // One action, so no render sees the draft and its page at once.
+    it('PUBLISHED_DRAFT removes the draft and adds the page together', () => {
+        const draft = makeDraft('p1', 'space-a', 'One');
+        const loaded = reducer(initialState, {type: DraftTypes.RECEIVED_DRAFTS, drafts: [draft], spaceId: 'space-a'});
+        const page = makePage('p1', 'space-a', 'One');
+
+        const next = reducer(loaded, {type: DraftTypes.PUBLISHED_DRAFT, spaceId: 'space-a', pageId: 'p1', page});
+
+        expect(next.drafts).toEqual({});
+        expect(next.draftsInSpace['space-a']).toEqual(new Set());
+        expect(next.pages).toEqual({p1: page});
+        expect(next.pagesInSpace['space-a']).toEqual(new Set(['p1']));
+    });
+
+    // Unpublished edits to a page that no longer exists can never be published.
+    it('DELETED_PAGE discards drafts for the deleted subtree', () => {
+        const parent = makePage('parent', 'space-a', 'Parent');
+        const child = {...makePage('child', 'space-a', 'Child'), parent_id: 'parent'};
+        const withPages = reducer(initialState, {type: PageTypes.RECEIVED_PAGES, pages: [parent, child], spaceId: 'space-a'});
+        const loaded = reducer(withPages, {
+            type: DraftTypes.RECEIVED_DRAFTS,
+            drafts: [makeDraft('child', 'space-a', 'Child edits', 0, 7)],
+            spaceId: 'space-a',
+        });
+
+        const next = reducer(loaded, {
+            type: PageTypes.DELETED_PAGE,
+            pageId: 'parent',
+            spaceId: 'space-a',
+            pageIds: [...collectSubtreeIds(loaded.pages, 'parent')],
+        });
+
+        expect(next.drafts).toEqual({});
+        expect(next.draftsInSpace['space-a']).toEqual(new Set());
+    });
+
+    it('DELETED_SPACE discards that space\'s drafts', () => {
+        const mine = makeDraft('p1', 'space-a', 'One');
+        const other = makeDraft('p2', 'space-b', 'Two');
+        const loaded = reducer(initialState, {type: DraftTypes.RECEIVED_DRAFTS, drafts: [mine, other]});
+
+        const next = reducer(loaded, {type: SpaceTypes.DELETED_SPACE, spaceId: 'space-a'});
+
+        expect(next.drafts).toEqual({p2: other});
+        expect(next.draftsInSpace['space-a']).toBeUndefined();
+    });
+});
+
 describe('collectSubtreeIds', () => {
     it('collects the root and every descendant, excluding unrelated pages', () => {
         const byId = {
diff --git a/webapp/src/store/entities.ts b/webapp/src/store/entities.ts
index 2f73055..479ecb6 100644
--- a/webapp/src/store/entities.ts
+++ b/webapp/src/store/entities.ts
@@ -5,8 +5,9 @@ import {combineReducers} from 'redux';
 import type {UnknownAction} from 'redux';
 
 import type {Page, Space} from 'types/docs';
+import type {Draft, DraftSummary} from 'types/drafts';
 
-import {PageTypes, SpaceTypes} from './action_types';
+import {DraftTypes, PageTypes, SpaceTypes} from './action_types';
 
 // `teamId` is set when the action is a full list for that team, which seeds the
 // team's index entry even when it has no spaces (see the spacesInTeam reducer).
@@ -22,6 +23,15 @@ type MovedPageAction = {pageId: string; spaceId: string; parentId: string; sibli
 type DeletedPageAction = {pageId: string; spaceId: string; pageIds: string[]};
 type ReceivedSpaceMembersAction = {spaceId: string; userIds: string[]};
 
+// `spaceId` marks a full list for that space, seeding its index entry even when the
+// space has no drafts — the same "loaded" signal RECEIVED_PAGES uses.
+type ReceivedDraftsAction = {drafts: Array<Draft | DraftSummary>; spaceId?: string};
+type ReceivedDraftAction = {draft: Draft};
+type DeletedDraftAction = {spaceId: string; pageId: string};
+
+// Publishing is one action so no render sees both the draft and its page.
+type PublishedDraftAction = {spaceId: string; pageId: string; page: Page};
+
 const bySortOrder = (a: Page, b: Page): number =>
     a.sort_order - b.sort_order || a.title.localeCompare(b.title);
 
@@ -187,6 +197,12 @@ function pages(state: Record<string, Page> = {}, action: UnknownAction): Record<
         }
         return next;
     }
+
+    // The other half of PUBLISHED_DRAFT: the page the draft became.
+    case DraftTypes.PUBLISHED_DRAFT: {
+        const {page} = action as unknown as PublishedDraftAction;
+        return {...state, [page.id]: page};
+    }
     case PageTypes.MOVED_PAGE: {
         const {pageId, spaceId, parentId, siblingIndex} = action as unknown as MovedPageAction;
         if (!(pageId in state)) {
@@ -235,6 +251,12 @@ function pagesInSpace(state: Record<string, Set<string>> = {}, action: UnknownAc
         }
         return next;
     }
+    case DraftTypes.PUBLISHED_DRAFT: {
+        const {page} = action as unknown as PublishedDraftAction;
+        const set = new Set(state[page.space_id]);
+        set.add(page.id);
+        return {...state, [page.space_id]: set};
+    }
     case PageTypes.DELETED_PAGE: {
         const {spaceId, pageIds} = action as unknown as DeletedPageAction;
         const set = state[spaceId];
@@ -281,8 +303,131 @@ function spaceMembers(state: Record<string, string[]> = {}, action: UnknownActio
     }
 }
 
+/**
+ * The caller's drafts, keyed by **page id**.
+ *
+ * Deliberately not merged into `pages`. The server keys a draft by
+ * (user_id, page_id), and every draft a client can read is its own user's — so page
+ * id alone is a sufficient key here, but the maps must stay separate or one user's
+ * unpublished title would render in another's tree.
+ */
+function drafts(state: Record<string, Draft> = {}, action: UnknownAction): Record<string, Draft> {
+    switch (action.type) {
+    case DraftTypes.RECEIVED_DRAFTS: {
+        const {drafts: received} = action as unknown as ReceivedDraftsAction;
+        if (received.length === 0) {
+            return state;
+        }
+        const next = {...state};
+        for (const draft of received) {
+            // A summary carries no body; merging preserves a body already fetched
+            // for that page rather than blanking it on a list refresh.
+            next[draft.page_id] = {...next[draft.page_id], ...draft} as Draft;
+        }
+        return next;
+    }
+    case DraftTypes.RECEIVED_DRAFT: {
+        const {draft} = action as unknown as ReceivedDraftAction;
+        return {...state, [draft.page_id]: draft};
+    }
+    case DraftTypes.DELETED_DRAFT:
+    case DraftTypes.PUBLISHED_DRAFT: {
+        const {pageId} = action as unknown as DeletedDraftAction;
+        if (!(pageId in state)) {
+            return state;
+        }
+        const next = {...state};
+        delete next[pageId];
+        return next;
+    }
+
+    // A deleted page takes its subtree's drafts with it: the pages are gone, so
+    // unpublished edits to them can never be published.
+    case PageTypes.DELETED_PAGE: {
+        const {pageIds} = action as unknown as DeletedPageAction;
+        const removed = pageIds.filter((id) => id in state);
+        if (removed.length === 0) {
+            return state;
+        }
+        const next = {...state};
+        removed.forEach((id) => delete next[id]);
+        return next;
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        const remaining = Object.entries(state).filter(([, draft]) => draft.space_id !== spaceId);
+        return remaining.length === Object.keys(state).length ? state : Object.fromEntries(remaining);
+    }
+    default:
+        return state;
+    }
+}
+
+// Page ids of the caller's drafts, keyed by space id. Mirrors pagesInSpace so
+// "this space has no drafts" can be told from "not fetched yet".
+function draftsInSpace(state: Record<string, Set<string>> = {}, action: UnknownAction): Record<string, Set<string>> {
+    const withDraft = (current: Record<string, Set<string>>, draft: Draft | DraftSummary) => {
+        const set = new Set(current[draft.space_id]);
+        set.add(draft.page_id);
+        return {...current, [draft.space_id]: set};
+    };
+
+    switch (action.type) {
+    case DraftTypes.RECEIVED_DRAFTS: {
+        const {drafts: received, spaceId} = action as unknown as ReceivedDraftsAction;
+        if (received.length === 0 && (spaceId === undefined || spaceId in state)) {
+            return state;
+        }
+        let next = {...state};
+        if (spaceId !== undefined && !(spaceId in next)) {
+            next[spaceId] = new Set();
+        }
+        for (const draft of received) {
+            next = withDraft(next, draft);
+        }
+        return next;
+    }
+    case DraftTypes.RECEIVED_DRAFT: {
+        const {draft} = action as unknown as ReceivedDraftAction;
+        return state[draft.space_id]?.has(draft.page_id) ? state : withDraft(state, draft);
+    }
+    case DraftTypes.DELETED_DRAFT:
+    case DraftTypes.PUBLISHED_DRAFT: {
+        const {spaceId, pageId} = action as unknown as DeletedDraftAction;
+        const set = state[spaceId];
+        if (!set?.has(pageId)) {
+            return state;
+        }
+        const nextSet = new Set(set);
+        nextSet.delete(pageId);
+        return {...state, [spaceId]: nextSet};
+    }
+    case PageTypes.DELETED_PAGE: {
+        const {spaceId, pageIds} = action as unknown as DeletedPageAction;
+        const set = state[spaceId];
+        if (!set || !pageIds.some((id) => set.has(id))) {
+            return state;
+        }
+        const nextSet = new Set(set);
+        pageIds.forEach((id) => nextSet.delete(id));
+        return {...state, [spaceId]: nextSet};
+    }
+    case SpaceTypes.DELETED_SPACE: {
+        const {spaceId} = action as unknown as DeletedSpaceAction;
+        if (!(spaceId in state)) {
+            return state;
+        }
+        const next = {...state};
+        delete next[spaceId];
+        return next;
+    }
+    default:
+        return state;
+    }
+}
+
 // Normalized server entities, kept separate from view/UI state so future
 // top-level reducers (e.g. `views`) can sit beside this one.
-const entities = combineReducers({spaces, spacesInTeam, pages, pagesInSpace, spaceMembers});
+const entities = combineReducers({spaces, spacesInTeam, pages, pagesInSpace, spaceMembers, drafts, draftsInSpace});
 
 export default entities;
diff --git a/webapp/src/store/reducer.test.ts b/webapp/src/store/reducer.test.ts
index 69a4df7..40b3e8f 100644
--- a/webapp/src/store/reducer.test.ts
+++ b/webapp/src/store/reducer.test.ts
@@ -16,6 +16,8 @@ describe('reducer', () => {
             'pages',
             'pagesInSpace',
             'spaceMembers',
+            'drafts',
+            'draftsInSpace',
         ]);
     });
 
diff --git a/webapp/src/store/selectors.test.ts b/webapp/src/store/selectors.test.ts
index 4ee77c8..3567d9b 100644
--- a/webapp/src/store/selectors.test.ts
+++ b/webapp/src/store/selectors.test.ts
@@ -5,26 +5,48 @@ import manifest from 'manifest';
 
 import type {GlobalState} from '@mattermost/types/store';
 
-import {getPagesForSpace, getSpacesInTeam} from './selectors';
-import {makePage, makeSpace} from './test_fixtures';
-import type {DocsPluginState} from './types';
+import type {Page} from 'types/docs';
+import type {Draft} from 'types/drafts';
+
+import {
+    areDraftsLoadedForSpace,
+    getDraftForPage,
+    getDraftsForSpace,
+    getOrphanDraftsForSpace,
+    getPagesForSpace,
+    getSpacesInTeam,
+    hasUnpublishedEdits,
+} from './selectors';
+import {makeDraft, makePage, makeSpace} from './test_fixtures';
+import type {DocsEntitiesState, DocsPluginState} from './types';
+
+const EMPTY: DocsEntitiesState = {
+    spaces: {},
+    spacesInTeam: {},
+    pages: {},
+    pagesInSpace: {},
+    spaceMembers: {},
+    drafts: {},
+    draftsInSpace: {},
+};
 
 const makeState = (docsState: DocsPluginState): GlobalState =>
     ({['plugins-' + manifest.id]: docsState}) as unknown as GlobalState;
 
+const stateWith = (entities: Partial<DocsEntitiesState>): GlobalState =>
+    makeState({entities: {...EMPTY, ...entities}});
+
+const indexed = <T extends Page | Draft>(items: T[], key: (item: T) => string) =>
+    Object.fromEntries(items.map((item) => [key(item), item]));
+
 describe('getSpacesInTeam', () => {
     it('resolves a team\'s ids to spaces ordered by sort_order, ignoring stale ids', () => {
         const spaceA = makeSpace('a', 'Space A', 't1', 1);
         const spaceB = makeSpace('b', 'Space B', 't1', 0);
 
-        const state = makeState({
-            entities: {
-                spaces: {a: spaceA, b: spaceB},
-                spacesInTeam: {t1: new Set(['a', 'b', 'missing'])},
-                pages: {},
-                pagesInSpace: {},
-                spaceMembers: {},
-            },
+        const state = stateWith({
+            spaces: {a: spaceA, b: spaceB},
+            spacesInTeam: {t1: new Set(['a', 'b', 'missing'])},
         });
 
         expect(getSpacesInTeam(state, 't1')).toEqual([spaceB, spaceA]);
@@ -37,17 +59,66 @@ describe('getPagesForSpace', () => {
         const page1 = makePage('p1', 'space-a', 'Page 1');
         const page2 = makePage('p2', 'space-b', 'Page 2');
 
-        const state = makeState({
-            entities: {
-                spaces: {},
-                spacesInTeam: {},
-                pages: {p1: page1, p2: page2},
-                pagesInSpace: {'space-a': new Set(['p1']), 'space-b': new Set(['p2'])},
-                spaceMembers: {},
-            },
+        const state = stateWith({
+            pages: {p1: page1, p2: page2},
+            pagesInSpace: {'space-a': new Set(['p1']), 'space-b': new Set(['p2'])},
         });
 
         expect(getPagesForSpace(state, 'space-a')).toEqual([page1]);
         expect(getPagesForSpace(state, 'space-c')).toEqual([]);
     });
 });
+
+describe('draft selectors', () => {
+    const orphan = makeDraft('new1', 'space-a', 'Unpublished page', 20);
+    const edits = makeDraft('published', 'space-a', 'Edited title', 30, 7);
+    const elsewhere = makeDraft('new2', 'space-b', 'Other space', 40);
+    const published = makePage('published', 'space-a', 'Published');
+
+    const state = stateWith({
+        pages: indexed([published], (page) => page.id),
+        pagesInSpace: {'space-a': new Set(['published'])},
+        drafts: indexed([orphan, edits, elsewhere], (draft) => draft.page_id),
+        draftsInSpace: {
+            'space-a': new Set(['new1', 'published']),
+            'space-b': new Set(['new2']),
+        },
+    });
+
+    it('getDraftForPage reads a draft by the page it belongs to', () => {
+        expect(getDraftForPage(state, 'published')).toEqual(edits);
+        expect(getDraftForPage(state, 'nothing')).toBeUndefined();
+    });
+
+    // A draft alone doesn't mean "unpublished changes" — an orphan draft is an
+    // unpublished page, which reads differently and gets its own row.
+    it('hasUnpublishedEdits is true only for a draft whose page exists', () => {
+        expect(hasUnpublishedEdits(state, 'published')).toBe(true);
+        expect(hasUnpublishedEdits(state, 'new1')).toBe(false);
+    });
+
+    it('getDraftsForSpace scopes to the space, newest first', () => {
+        expect(getDraftsForSpace(state, 'space-a')).toEqual([edits, orphan]);
+        expect(getDraftsForSpace(state, 'space-c')).toEqual([]);
+    });
+
+    // The trap this selector exists to prevent: a draft whose page is already in
+    // the tree must not also appear as a draft row, or the page renders twice.
+    it('getOrphanDraftsForSpace excludes drafts for pages that exist', () => {
+        expect(getOrphanDraftsForSpace(state, 'space-a')).toEqual([orphan]);
+    });
+
+    it('getOrphanDraftsForSpace returns a stable empty array', () => {
+        const none = stateWith({draftsInSpace: {'space-a': new Set()}});
+
+        expect(getOrphanDraftsForSpace(none, 'space-a')).
+            toBe(getOrphanDraftsForSpace(none, 'space-a'));
+    });
+
+    it('areDraftsLoadedForSpace tells "none" apart from "not fetched"', () => {
+        const fetchedEmpty = stateWith({draftsInSpace: {'space-a': new Set()}});
+
+        expect(areDraftsLoadedForSpace(fetchedEmpty, 'space-a')).toBe(true);
+        expect(areDraftsLoadedForSpace(fetchedEmpty, 'space-b')).toBe(false);
+    });
+});
diff --git a/webapp/src/store/selectors.ts b/webapp/src/store/selectors.ts
index a4ef7e7..86ccd01 100644
--- a/webapp/src/store/selectors.ts
+++ b/webapp/src/store/selectors.ts
@@ -9,6 +9,7 @@ import type {GlobalState} from '@mattermost/types/store';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 
 import type {Page, Space} from 'types/docs';
+import type {Draft} from 'types/drafts';
 
 import {collectSubtreeIds} from './entities';
 import type {DocsEntitiesState, DocsPluginState} from './types';
@@ -20,11 +21,14 @@ const EMPTY_PLUGIN_STATE: DocsPluginState = {
         pages: {},
         pagesInSpace: {},
         spaceMembers: {},
+        drafts: {},
+        draftsInSpace: {},
     },
 };
 
 const EMPTY_SPACES: Space[] = [];
 const EMPTY_PAGES: Page[] = [];
+const EMPTY_DRAFTS: Draft[] = [];
 
 // Assert known typing, mirroring the Playbooks pluginState selector — the host
 // store types plugin subtrees as `unknown`. Falls back to an empty slice so a
@@ -56,6 +60,15 @@ const resolvePages = (ids: Set<string> | undefined, byId: Record<string, Page>):
     return compact([...ids].map((id) => byId[id])).sort(bySortOrder);
 };
 
+// Drafts have no sort_order to order by, so recency stands in — matching the
+// server's UpdateAt DESC collection order.
+const resolveDrafts = (ids: Set<string> | undefined, byId: Record<string, Draft>): Draft[] => {
+    if (!ids || ids.size === 0) {
+        return EMPTY_DRAFTS;
+    }
+    return compact([...ids].map((id) => byId[id])).sort((a, b) => b.update_at - a.update_at);
+};
+
 export const getSpacesById = (state: GlobalState): Record<string, Space> => entities(state).spaces;
 
 export const getSpacesInTeamIndex = (state: GlobalState): Record<string, Set<string>> => entities(state).spacesInTeam;
@@ -134,6 +147,49 @@ export const areMembersLoadedForSpace = (state: GlobalState, spaceId: string): b
 export const arePagesLoadedForSpace = (state: GlobalState, spaceId: string): boolean =>
     spaceId in getPagesInSpaceIndex(state);
 
+export const getDraftsById = (state: GlobalState): Record<string, Draft> => entities(state).drafts;
+
+const getDraftsInSpaceIndex = (state: GlobalState): Record<string, Set<string>> => entities(state).draftsInSpace;
+
+// The caller's unpublished work on a page, if any. Keyed by page id, so this is
+// also how an orphan draft is reached — its page id is reserved, not published.
+export const getDraftForPage = (state: GlobalState, pageId: string): Draft | undefined =>
+    getDraftsById(state)[pageId];
+
+// Whether the caller has unpublished edits to an existing page. Distinct from
+// having a draft at all: an orphan draft is an unpublished *page*, not an edit.
+export const hasUnpublishedEdits = (state: GlobalState, pageId: string): boolean =>
+    pageId in getDraftsById(state) && pageId in getPagesById(state);
+
+// A space's drafts, newest first — the order the server's drafts collection uses,
+// and the only order available since drafts carry no sort_order.
+export const getDraftsForSpace = createSelector(
+    [getDraftsById, getDraftsInSpaceIndex, (_state: GlobalState, spaceId: string) => spaceId],
+    (byId, index, spaceId) => resolveDrafts(index[spaceId], byId),
+);
+
+/**
+ * A space's drafts that have no published page — unpublished new pages, which the
+ * tree renders as rows of their own.
+ *
+ * The complement (a draft whose page exists) must NOT get a row: its page is
+ * already in the tree, and adding one would render the same page twice. Encoded
+ * here once rather than at each call site, because that duplicate is the easy
+ * mistake to make.
+ */
+export const getOrphanDraftsForSpace = createSelector(
+    [getDraftsForSpace, getPagesById],
+    (spaceDrafts, pagesById) => {
+        const orphans = spaceDrafts.filter((draft) => !(draft.page_id in pagesById));
+        return orphans.length === 0 ? EMPTY_DRAFTS : orphans;
+    },
+);
+
+// Whether a space's drafts have been fetched (fetchDrafts seeds the index entry
+// even for a space with none), so "no drafts" is distinguishable from "not asked".
+export const areDraftsLoadedForSpace = (state: GlobalState, spaceId: string): boolean =>
+    spaceId in getDraftsInSpaceIndex(state);
+
 export type DocsSearchResults = {
     spaces: Space[];
     pages: Page[];
diff --git a/webapp/src/store/test_fixtures.ts b/webapp/src/store/test_fixtures.ts
index 849fa5c..1cfbd08 100644
--- a/webapp/src/store/test_fixtures.ts
+++ b/webapp/src/store/test_fixtures.ts
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import type {Page, Space} from 'types/docs';
+import type {Draft} from 'types/drafts';
 
 export const makeTeam = (id: string, name: string) => ({id, name});
 
@@ -17,6 +18,23 @@ export const makeSpace = (id: string, title: string, teamId = '', sortOrder = 0)
     sort_order: sortOrder,
 });
 
+// `baseEditAt` 0 is an orphan draft (a page that does not exist yet); non-zero is
+// unpublished edits to the page it was started from.
+export const makeDraft = (pageId: string, spaceId: string, title: string, updateAt = 0, baseEditAt = 0): Draft => ({
+    user_id: 'me',
+    space_id: spaceId,
+    page_id: pageId,
+    parent_id: '',
+    title,
+    body: '',
+    file_ids: [],
+    props: {},
+    create_at: 0,
+    update_at: updateAt,
+    last_active_at: 0,
+    base_edit_at: baseEditAt,
+});
+
 export const makePage = (id: string, spaceId: string, title: string, sortOrder = 0): Page => ({
     id,
     space_id: spaceId,
diff --git a/webapp/src/types/drafts.ts b/webapp/src/types/drafts.ts
new file mode 100644
index 0000000..6289fbe
--- /dev/null
+++ b/webapp/src/types/drafts.ts
@@ -0,0 +1,86 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {Page} from './docs';
+
+/**
+ * A per-user autosave draft (server model.Draft, table DOCS_Draft).
+ *
+ * Keyed by (user_id, page_id) server-side, with no id of its own. `page_id` is the
+ * page the draft belongs to — reserved at creation for a page that does not exist
+ * yet, which is what makes a draft addressable before it is published.
+ *
+ * A draft whose `page_id` has no published page is an *orphan*: a new page nobody
+ * else can see yet. One whose page does exist is unpublished edits to that page.
+ * The two look identical here and are told apart by the store (see
+ * getOrphanDraftsForSpace), because they read very differently in the UI.
+ *
+ * Note the absence of a sort order: the server has no SortOrder column for drafts,
+ * so an orphan draft cannot be interleaved with its published siblings.
+ */
+export type Draft = {
+    user_id: string;
+    space_id: string;
+    page_id: string;
+
+    // The pending parent for an unpublished page; applied on publish.
+    parent_id: string;
+    title: string;
+    body: string;
+    file_ids: string[];
+    props: Record<string, unknown>;
+    create_at: number;
+    update_at: number;
+
+    // Last autosave heartbeat, backing the active-editors presence read.
+    last_active_at: number;
+
+    /**
+     * The optimistic-lock baseline: the page `edit_at` this draft was started from,
+     * 0 for a page that does not exist yet. Write-once server-side — resending it
+     * on later autosaves does not re-baseline, so recovering from a conflict means
+     * force-publishing or discarding, never autosaving a newer baseline.
+     */
+    base_edit_at: number;
+};
+
+// The projection returned by the space-wide drafts collection: metadata only, no
+// content. Fetch the draft by page id when the body is needed.
+export type DraftSummary = Omit<Draft, 'body' | 'props' | 'base_edit_at'>;
+
+// A nil field means "leave unchanged".
+export type DraftPatch = {
+    title?: string;
+    body?: string;
+    parent_id?: string;
+    file_ids?: string[];
+    props?: Record<string, unknown>;
+    base_edit_at?: number;
+};
+
+export type PageActiveEditors = {
+    active_editors: string[];
+    snapshot_at: number;
+    active_timeout_ms: number;
+};
+
+// Why a publish was refused. `parent_unpublished` cannot be forced — the parent
+// has to be published first — while the edit conflicts can.
+export const ConflictReason = {
+    ConcurrentEdit: 'concurrent_edit',
+    ConcurrentAutosave: 'concurrent_autosave',
+    ParentUnpublished: 'parent_unpublished',
+} as const;
+
+export type ConflictReasonType = typeof ConflictReason[keyof typeof ConflictReason];
+
+// The 409 body from publish, which carries data rather than only an error: the
+// current server page, so the caller can re-baseline without another read.
+export type PublishConflict = {
+    error: {
+        id: string;
+        message: string;
+        status_code: number;
+    };
+    current_page: Page | null;
+};
diff --git a/webapp/tests/react_testing_utils.tsx b/webapp/tests/react_testing_utils.tsx
index 192c9f8..0e5137c 100644
--- a/webapp/tests/react_testing_utils.tsx
+++ b/webapp/tests/react_testing_utils.tsx
@@ -23,6 +23,8 @@ const EMPTY_DOCS_ENTITIES: DocsEntitiesState = {
     pages: {},
     pagesInSpace: {},
     spaceMembers: {},
+    drafts: {},
+    draftsInSpace: {},
 };
 
 type TestTeam = {id: string; name: string; display_name?: string};

From b3ec68bbf95df653fcfed0c9d06babe5b3c4fb2b Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 19:42:30 -0500
Subject: [PATCH 60/68] feat(docs): create pages as drafts and publish them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding a page now creates a draft rather than a published page, so nobody
else sees a half-written page and the author decides when it becomes real.
The draft reserves its page id, which is what makes it addressable before it
exists.

That gives /spaces/:spaceId/drafts/:pageId a job and settles the view-vs-edit
question the interop plan left open: ?edit=1 is a mode on a published page,
the draft route is an unpublished one. A draft has no reading mode, so its
route is always editing and carries no query.

- useCreateRootPage creates a draft and opens it
- SpaceView renders the draft route, redirecting to the page once the draft is
  published (here or in another tab) and to the front door when the URL names
  no draft — but only once the fetch settles, so a slow response is not
  mistaken for a bad URL
- PageContent takes a page or a draft and routes title writes to the matching
  endpoint; the placeholder, in-flight guard and exit-commit behaviour are
  unchanged
- Publish in the page header, with the unpublishable-parent conflict given the
  instruction that helps rather than a generic retry

Prompt: creation + draft route + publish first, then the tree refactor
---
 .../space_view/page_content/page_content.tsx  | 120 +++++++++-----
 .../space_view/page_header.test.tsx           |   1 +
 .../src/components/space_view/page_header.tsx |  42 ++++-
 .../src/components/space_view/space_view.tsx  |  31 +++-
 webapp/src/hooks/drafts.test.tsx              | 155 ++++++++++++++++++
 webapp/src/hooks/drafts.ts                    | 101 ++++++++++++
 webapp/src/hooks/navigation.ts                |  18 +-
 webapp/src/hooks/pages.test.tsx               |  30 ++--
 webapp/src/hooks/pages.ts                     |  25 +--
 9 files changed, 451 insertions(+), 72 deletions(-)
 create mode 100644 webapp/src/hooks/drafts.test.tsx
 create mode 100644 webapp/src/hooks/drafts.ts

diff --git a/webapp/src/components/space_view/page_content/page_content.tsx b/webapp/src/components/space_view/page_content/page_content.tsx
index f9ef3c8..94d4b7d 100644
--- a/webapp/src/components/space_view/page_content/page_content.tsx
+++ b/webapp/src/components/space_view/page_content/page_content.tsx
@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import {useUserProfile} from 'hooks/members';
-import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
@@ -11,7 +10,7 @@ import {Avatar} from 'webapp_globals';
 import EmoticonPlusOutlineIcon from '@mattermost/compass-icons/components/emoticon-plus-outline';
 import ImageOutlineIcon from '@mattermost/compass-icons/components/image-outline';
 
-import {updatePage} from 'store/actions';
+import {saveDraft, updatePage} from 'store/actions';
 
 import {Button} from 'components/form_controls/button';
 import PageEditor from 'components/page_editor/page_editor';
@@ -19,6 +18,7 @@ import {toast} from 'components/toast';
 
 import {UNTITLED_PAGE_TITLE} from 'types/docs';
 import type {Page} from 'types/docs';
+import type {Draft} from 'types/drafts';
 
 import styles from './page_content.module.scss';
 import PageContentPlaceholder from './page_content_placeholder';
@@ -26,37 +26,74 @@ import PageTitle from './page_title';
 
 type Props = {
 
-    // Resolved and space-validated by the caller; undefined only while the
-    // space's pages are still loading (an id that doesn't belong to the space
-    // redirects instead of rendering here).
+    // The routed page, when it is published. Undefined while the space's pages are
+    // still loading (an id that doesn't belong to the space redirects instead of
+    // rendering here), and for a draft that has no published page yet.
     page?: Page;
+
+    // The routed draft, for an unpublished page. Mutually exclusive with `page` in
+    // practice: unpublished edits to a published page render the page.
+    draft?: Draft;
     editing: boolean;
 };
 
-// The selected page's content column: a title area over the page body, which is
-// the editor. Until the routed page arrives in the store there is no title and no
-// id to open the editor on, so that window stays a skeleton.
-const PageContent = ({page, editing}: Props) => {
-    const {isDraft} = useDocsNavigation();
+// What the title area needs, from whichever of the two backs this view. A draft is
+// addressed by the page id it reserved, so `id` means the same thing either way.
+type TitleSubject = {
+    id: string;
+    spaceId: string;
+    title: string;
+    authorId: string;
+};
+
+// The selected page's content column: a title area over the page body, which is the
+// editor. Until the routed page or draft arrives in the store there is no title and
+// no id to open the editor on, so that window stays a skeleton.
+const PageContent = ({page, draft, editing}: Props) => {
+    const dispatch = useAppDispatch();
+
+    const subject: TitleSubject | undefined = page ? {
+        id: page.id,
+        spaceId: page.space_id,
+        title: page.title,
+        authorId: page.user_id,
+    } : draft && {
+        id: draft.page_id,
+        spaceId: draft.space_id,
+        title: draft.title,
+        authorId: draft.user_id,
+    };
+
+    // A published page's title is patched on the page; an unpublished one is an
+    // autosave against the draft. Same gesture, different endpoint — so the title
+    // area takes the write as a callback rather than knowing which it is.
+    const saveTitle = useCallback(async (title: string) => {
+        if (page) {
+            await dispatch(updatePage(page.space_id, page.id, {title}));
+        } else if (draft) {
+            await dispatch(saveDraft(draft.space_id, draft.page_id, {title}));
+        }
+    }, [dispatch, page, draft]);
 
     return (
         <div className={styles.frame}>
             <article className={styles.article}>
-                {page ? (
+                {subject ? (
                     <>
                         {/* The title buffer belongs to one page: keying it means a
                             newly routed page never inherits what was typed for the
                             last one, and a write already in flight keeps targeting
                             the page it started on. */}
                         <PageTitleArea
-                            key={page.id}
-                            page={page}
+                            key={subject.id}
+                            subject={subject}
                             editing={editing}
+                            saveTitle={saveTitle}
                         />
                         <PageEditor
-                            spaceId={page.space_id}
-                            pageId={page.id}
-                            isDraft={isDraft}
+                            spaceId={subject.spaceId}
+                            pageId={subject.id}
+                            isDraft={!page}
                         />
                     </>
                 ) : (
@@ -67,24 +104,29 @@ const PageContent = ({page, editing}: Props) => {
     );
 };
 
-// Title, byline, and the decoration actions that reveal on hover. Adding an
-// emoji or a header image needs page props the editor work will bring, so those
-// two are affordances only for now.
-const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
+type TitleAreaProps = {
+    subject: TitleSubject;
+    editing: boolean;
+    saveTitle: (title: string) => Promise<void>;
+};
+
+// Title, byline, and the decoration actions that reveal on hover. Adding an emoji or
+// a header image needs page props the editor work will bring, so those two are
+// affordances only for now.
+const PageTitleArea = ({subject, editing, saveTitle}: TitleAreaProps) => {
     const {formatMessage} = useIntl();
-    const author = useUserProfile(page.user_id);
-    const dispatch = useAppDispatch();
+    const author = useUserProfile(subject.authorId);
 
     const untitled = formatMessage(UNTITLED_PAGE_TITLE);
 
     // An unnamed page stores the untitled placeholder as its title, because the
     // server has no empty-title representation. The field shows that as nothing at
-    // all, so typing a name replaces it without selecting it first; `stored` maps
+    // all, so typing a name replaces it without selecting it first; `asStored` maps
     // back for the write.
     const asBuffer = useCallback((stored: string) => (stored === untitled ? '' : stored), [untitled]);
     const asStored = (buffer: string) => buffer.trim() || untitled;
 
-    const [title, setTitle] = useState(() => asBuffer(page.title));
+    const [title, setTitle] = useState(() => asBuffer(subject.title));
 
     // Commit runs from an effect cleanup and from a settled write, neither of which
     // can see the render they were created in; the ref is the buffer as it is now.
@@ -95,27 +137,27 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
     }, []);
 
     // Enter and blur are independent triggers (Enter doesn't blur the field), so
-    // both can fire commit before a prior write resolves and the store's page.title
+    // both can fire commit before a prior write resolves and the stored title
     // catches up. Without this guard a second write goes out on the same stale
     // baseline — wasted at best, a spurious failure toast at worst if the first
     // write's edit_at bump turns the second into a conflict.
     const commitInFlight = useRef(false);
 
-    // The title this component last took from the page. The buffer holding anything
+    // The title this component last took from the store. The buffer holding anything
     // else means there is unsaved input, which an incoming title must not replace —
     // including the title our own write just put in the store, since the user may
     // have typed on while it was in flight.
-    const observedTitle = useRef(asBuffer(page.title));
+    const observedTitle = useRef(asBuffer(subject.title));
     useEffect(() => {
         const previous = observedTitle.current;
-        observedTitle.current = asBuffer(page.title);
+        observedTitle.current = asBuffer(subject.title);
         if (titleRef.current === previous) {
             setBuffer(observedTitle.current);
         }
-    }, [page.title, asBuffer, setBuffer]);
+    }, [subject.title, asBuffer, setBuffer]);
 
     // Deferred callers reach commit through the ref so they run the current one,
-    // which reads today's page.title rather than the one their closure captured.
+    // which reads today's stored title rather than the one their closure captured.
     const commitRef = useRef<() => Promise<void>>();
 
     // Trailing whitespace is never intentional in a title, and a title that only
@@ -128,17 +170,17 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
             setBuffer(typed);
         }
         const next = asStored(typed);
-        if (next === page.title || commitInFlight.current) {
+        if (next === subject.title || commitInFlight.current) {
             return;
         }
 
         commitInFlight.current = true;
         try {
-            await dispatch(updatePage(page.space_id, page.id, {title: next}));
+            await saveTitle(next);
         } catch {
             // Keep the typed title: reverting would look like the edit was taken
-            // and then silently lost. The rejection reason itself isn't
-            // actionable here, so it's deliberately dropped rather than logged.
+            // and then silently lost. The rejection reason itself isn't actionable
+            // here, so it's deliberately dropped rather than logged.
             toast.error(formatMessage({
                 id: 'docs.page.titleSaveFailed',
                 defaultMessage: 'Could not rename the page. Please try again.',
@@ -147,9 +189,9 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
             commitInFlight.current = false;
         }
 
-        // Anything typed while that write was in flight was turned away by the
-        // guard above and would otherwise be lost. One extra write per round trip
-        // at most, and the last thing typed is the one that lands.
+        // Anything typed while that write was in flight was turned away by the guard
+        // above and would otherwise be lost. One extra write per round trip at most,
+        // and the last thing typed is the one that lands.
         if (titleRef.current.trim() !== typed) {
             await commitRef.current?.();
         }
@@ -194,11 +236,11 @@ const PageTitleArea = ({page, editing}: {page: Page; editing: boolean}) => {
                 failed keeps the typed value in the field for another try, but the
                 heading must not present it as the page's title. */}
             <PageTitle
-                value={editing ? title : page.title}
+                value={editing ? title : subject.title}
                 editing={editing}
                 onChange={setBuffer}
                 onCommit={commit}
-                onCancel={() => setBuffer(asBuffer(page.title))}
+                onCancel={() => setBuffer(asBuffer(subject.title))}
             />
 
             {author?.displayName && (
diff --git a/webapp/src/components/space_view/page_header.test.tsx b/webapp/src/components/space_view/page_header.test.tsx
index 0ffd0fd..0f3b242 100644
--- a/webapp/src/components/space_view/page_header.test.tsx
+++ b/webapp/src/components/space_view/page_header.test.tsx
@@ -32,6 +32,7 @@ const renderHeader = (props: Partial<React.ComponentProps<typeof PageHeader>> =
             editing={false}
             onTogglePages={jest.fn()}
             onToggleEdit={jest.fn()}
+            onPublish={jest.fn()}
             {...props}
         />,
     );
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 3ad0d8b..9a74d22 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -4,7 +4,7 @@
 import classNames from 'classnames';
 import {useCreateRootPage} from 'hooks/pages';
 import {useSidebarWidth} from 'hooks/sidebar_width';
-import React from 'react';
+import React, {useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {Timestamp} from 'webapp_globals';
 import type {TimestampUnit} from 'webapp_globals';
@@ -22,6 +22,7 @@ import PageMenu from 'components/page_menu/page_menu';
 import Spacer from 'components/spacer/spacer';
 
 import type {Page, Space} from 'types/docs';
+import type {Draft} from 'types/drafts';
 
 import styles from './page_header.module.scss';
 import {DEFAULT_SIDEBAR_WIDTH} from './sidebar/sidebar';
@@ -57,17 +58,35 @@ type Props = {
     // the page-scoped controls; on the space home (no page) only the space's
     // last-updated time shows.
     page?: Page;
+
+    // The routed draft, for a page that isn't published yet. Swaps the page-scoped
+    // controls for Publish: there is no published version to comment on, share, or
+    // toggle back to reading.
+    draft?: Draft;
     treeOpen: boolean;
     editing: boolean;
     onTogglePages: () => void;
     onToggleEdit: () => void;
+    onPublish: () => void;
 };
 
 // Page controls (comments, edit, overflow, expand) are visual scaffolding wired
 // in later passes; the pages toggle drives the page tree panel.
-const PageHeader = ({space, page, treeOpen, editing, onTogglePages, onToggleEdit}: Props) => {
+const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onToggleEdit, onPublish}: Props) => {
     const {formatMessage} = useIntl();
     const createRootPage = useCreateRootPage(space.id);
+    const [publishing, setPublishing] = useState(false);
+
+    // Publishing navigates on success, so the guard is against a second click during
+    // the round trip rather than a state this component returns to.
+    const publish = async () => {
+        setPublishing(true);
+        try {
+            await onPublish();
+        } finally {
+            setPublishing(false);
+        }
+    };
 
     // Read-only view of the pages sidebar's live width, so the add-page button
     // can sit on its right edge (shared store, no prop threading).
@@ -78,9 +97,9 @@ const PageHeader = ({space, page, treeOpen, editing, onTogglePages, onToggleEdit
     const moreLabel = formatMessage({id: 'docs.space.more', defaultMessage: 'More actions'});
     const expandLabel = formatMessage({id: 'docs.space.expand', defaultMessage: 'Expand'});
 
-    // The current page's last-updated time when a page is open, otherwise the
-    // space's.
-    const updatedAt = page ? page.update_at : space.update_at;
+    // The open page's last-updated time, the draft's own while it is unpublished,
+    // otherwise the space's.
+    const updatedAt = page?.update_at ?? draft?.update_at ?? space.update_at;
 
     // Timestamp's `style` is a narrow/short/long format variant, not a DOM style object.
     /* eslint-disable react/style-prop-object */
@@ -140,6 +159,19 @@ const PageHeader = ({space, page, treeOpen, editing, onTogglePages, onToggleEdit
                         values={{relative: updatedRelative}}
                     />
                 </span>
+                {draft && (
+                    <Button
+                        emphasis='primary'
+                        size='sm'
+                        disabled={publishing}
+                        onClick={publish}
+                    >
+                        <FormattedMessage
+                            id='docs.space.publish'
+                            defaultMessage='Publish'
+                        />
+                    </Button>
+                )}
                 {page && (
                     <>
                         <Button
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index fdd4214..0954e3c 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {usePageDraft, usePublishDraft} from 'hooks/drafts';
 import {useDocsNavigation, useTogglePageEditMode} from 'hooks/navigation';
 import {useDefaultPagePath} from 'hooks/pages';
 import {useAppSelector} from 'hooks/redux';
@@ -32,10 +33,19 @@ import styles from './space_view.module.scss';
 // (hero) until a page is routed, at which point it shows that page instead.
 // Page bodies are a placeholder until the editor is mounted.
 const SpaceView = ({space}: {space: Space}) => {
-    const {pageId, isEditing, paths} = useDocsNavigation();
+    const {pageId, isDraft, isEditing, paths} = useDocsNavigation();
     const toggleEdit = useTogglePageEditMode(space.id);
     const page = useAppSelector((state) => (pageId ? getPageInSpace(state, space.id, pageId) : undefined));
     const pagesLoaded = useAppSelector((state) => arePagesLoadedForSpace(state, space.id));
+
+    // Only the draft route loads a draft. Unpublished edits to a published page are
+    // the editor's concern; this view renders the page for those.
+    const {draft, loaded: draftLoaded} = usePageDraft(
+        isDraft ? space.id : undefined,
+        isDraft ? pageId : undefined,
+    );
+    const publish = usePublishDraft(space.id);
+    const onPublish = useCallback(() => (pageId ? publish(pageId) : undefined), [publish, pageId]);
     const {pageCount, memberCount} = useSpaceStats(space.id);
     const defaultPagePath = useDefaultPagePath(space);
     const [treeOpen, setTreeOpen] = useState(true);
@@ -52,11 +62,25 @@ const SpaceView = ({space}: {space: Space}) => {
         return <Redirect to={defaultPagePath}/>;
     }
 
+    // A draft URL whose page now exists means the draft was published — here or in
+    // another tab. The page is the canonical address for it, so hand over.
+    if (isDraft && pageId && page) {
+        return <Redirect to={paths.page(space.id, pageId)}/>;
+    }
+
+    // A draft URL naming no draft was discarded or never existed. Waiting for the
+    // fetch to settle first matters: correcting it earlier would turn a slow
+    // response into a bounce out of a draft that is really there.
+    if (isDraft && draftLoaded && !draft) {
+        return <Redirect to={paths.overview(space.id)}/>;
+    }
+
     // Once the space's pages are loaded, a routed id that isn't among them names
     // a page in another space or one that's gone, so fall back to the front door
     // rather than rendering a page shell that can never fill in. /overview is
     // explicit, so it won't bounce back through the default-page redirect above.
-    if (pageId && pagesLoaded && !page) {
+    // Excludes the draft route, where having no page is the normal case.
+    if (!isDraft && pageId && pagesLoaded && !page) {
         return <Redirect to={paths.overview(space.id)}/>;
     }
 
@@ -73,10 +97,12 @@ const SpaceView = ({space}: {space: Space}) => {
                 <PageHeader
                     space={space}
                     page={page}
+                    draft={draft}
                     treeOpen={treeOpen}
                     editing={isEditing}
                     onTogglePages={togglePages}
                     onToggleEdit={toggleEdit}
+                    onPublish={onPublish}
                 />
                 <div className={styles.body}>
                     <Sidebar open={treeOpen}>
@@ -87,6 +113,7 @@ const SpaceView = ({space}: {space: Space}) => {
                             {pageId ? (
                                 <PageContent
                                     page={page}
+                                    draft={draft}
                                     editing={isEditing}
                                 />
                             ) : (
diff --git a/webapp/src/hooks/drafts.test.tsx b/webapp/src/hooks/drafts.test.tsx
new file mode 100644
index 0000000..1ae4c61
--- /dev/null
+++ b/webapp/src/hooks/drafts.test.tsx
@@ -0,0 +1,155 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {act, renderHook, waitFor} from '@testing-library/react';
+import {PublishConflictError} from 'data/publish_conflict';
+import React from 'react';
+import {IntlProvider} from 'react-intl';
+import {Provider} from 'react-redux';
+
+import {makeDraft, makePage} from 'store/test_fixtures';
+
+import {toast} from 'components/toast';
+
+import type {Page} from 'types/docs';
+
+import {usePageDraft, usePublishDraft} from './drafts';
+
+import {makeTestStore} from '../../tests/react_testing_utils';
+
+const mockFetchPageDraft = jest.fn();
+const mockPublishDraft = jest.fn();
+let mockFetchResult: Promise<unknown> = Promise.resolve(undefined);
+let mockPublishResult: Promise<Page> = Promise.resolve(makePage('new', 'eng', 'New'));
+
+jest.mock('store/actions', () => ({
+    ...jest.requireActual('store/actions'),
+    fetchPageDraft: (...args: unknown[]) => {
+        mockFetchPageDraft(...args as []);
+        return async () => mockFetchResult;
+    },
+    publishDraft: (...args: unknown[]) => {
+        mockPublishDraft(...args as []);
+        return async () => mockPublishResult;
+    },
+}));
+
+const mockGoToPage = jest.fn();
+
+jest.mock('hooks/navigation', () => ({
+    useDocsNavigation: () => ({goToPage: mockGoToPage}),
+}));
+
+jest.mock('components/toast', () => ({toast: {error: jest.fn()}}));
+
+const wrapperWith = (store: ReturnType<typeof makeTestStore>) =>
+    ({children}: {children: React.ReactNode}) => (
+        <Provider store={store}>
+            <IntlProvider
+                locale='en'
+                messages={{}}
+            >
+                {children}
+            </IntlProvider>
+        </Provider>
+    );
+
+beforeEach(() => {
+    jest.clearAllMocks();
+    mockFetchResult = Promise.resolve(undefined);
+    mockPublishResult = Promise.resolve(makePage('new', 'eng', 'New'));
+});
+
+describe('usePageDraft', () => {
+    const renderDraft = (spaceId?: string, pageId?: string, drafts = {}) => {
+        const store = makeTestStore({docs: {drafts}});
+        return renderHook(() => usePageDraft(spaceId, pageId), {wrapper: wrapperWith(store)});
+    };
+
+    it('reads the draft for the routed page out of the store', async () => {
+        const draft = makeDraft('new', 'eng', 'Unpublished');
+        const {result} = renderDraft('eng', 'new', {new: draft});
+
+        await waitFor(() => expect(result.current.loaded).toBe(true));
+        expect(result.current.draft).toEqual(draft);
+        expect(mockFetchPageDraft).toHaveBeenCalledWith('eng', 'new', expect.anything());
+    });
+
+    it('does not fetch without both ids', () => {
+        const {result} = renderDraft(undefined, undefined);
+
+        expect(mockFetchPageDraft).not.toHaveBeenCalled();
+        expect(result.current.loaded).toBe(false);
+    });
+
+    // A URL naming no draft has to be distinguishable from one still loading, or the
+    // caller corrects it before the answer is in.
+    it('reports loaded with no draft when the page has none', async () => {
+        const {result} = renderDraft('eng', 'missing');
+
+        await waitFor(() => expect(result.current.loaded).toBe(true));
+        expect(result.current.draft).toBeUndefined();
+    });
+
+    it('settles as loaded when the fetch fails, rather than retrying forever', async () => {
+        mockFetchResult = Promise.reject(new Error('nope'));
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        const {result} = renderDraft('eng', 'new');
+
+        await waitFor(() => expect(result.current.loaded).toBe(true));
+    });
+});
+
+describe('usePublishDraft', () => {
+    const renderPublish = () => {
+        const store = makeTestStore();
+        return renderHook(() => usePublishDraft('eng'), {wrapper: wrapperWith(store)}).result;
+    };
+
+    // Publishing destroys the draft, so its URL is dead — Back must not return to it.
+    it('routes to the published page, replacing the draft URL', async () => {
+        const publish = renderPublish();
+
+        await act(async () => {
+            await publish.current('new');
+        });
+
+        expect(mockPublishDraft).toHaveBeenCalledWith('eng', 'new');
+        expect(mockGoToPage).toHaveBeenCalledWith('eng', 'new', {replace: true});
+    });
+
+    // force cannot fix an unpublished parent, so this conflict gets the instruction
+    // that helps instead of a generic retry message.
+    it('explains an unpublished parent instead of failing generically', async () => {
+        mockPublishResult = Promise.reject(new PublishConflictError({
+            error: {id: 'parent_unpublished', message: 'nope', status_code: 409},
+            current_page: null,
+        }));
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        const publish = renderPublish();
+
+        await act(async () => {
+            await publish.current('new');
+        });
+
+        expect(toast.error).toHaveBeenCalled();
+        expect(mockGoToPage).not.toHaveBeenCalled();
+        expect(console.error).not.toHaveBeenCalled();
+    });
+
+    it('reports any other failure and stays put', async () => {
+        mockPublishResult = Promise.reject(new Error('boom'));
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+
+        const publish = renderPublish();
+
+        await act(async () => {
+            await publish.current('new');
+        });
+
+        expect(toast.error).toHaveBeenCalled();
+        expect(mockGoToPage).not.toHaveBeenCalled();
+    });
+});
diff --git a/webapp/src/hooks/drafts.ts b/webapp/src/hooks/drafts.ts
new file mode 100644
index 0000000..99f5819
--- /dev/null
+++ b/webapp/src/hooks/drafts.ts
@@ -0,0 +1,101 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {PublishConflictError} from 'data/publish_conflict';
+import {useCallback, useEffect, useState} from 'react';
+import {useIntl} from 'react-intl';
+
+import {fetchPageDraft, publishDraft} from 'store/actions';
+import {getDraftForPage} from 'store/selectors';
+
+import {toast} from 'components/toast';
+
+import {ConflictReason} from 'types/drafts';
+import type {Draft} from 'types/drafts';
+
+import {useDocsNavigation} from './navigation';
+import {useAppDispatch, useAppSelector} from './redux';
+
+type LoadedDraft = {
+    draft: Draft | undefined;
+
+    // False until the fetch settles. A draft URL that names nothing must not be
+    // corrected before the answer is in, or a slow response looks like a bad URL.
+    loaded: boolean;
+};
+
+/**
+ * Loads the caller's draft for a page and returns it from the store.
+ *
+ * Pass undefined ids to skip the load. The request is aborted if the routed page
+ * changes mid-flight, so a slow response for the previous page can't land after the
+ * new one — the abort rejects with AbortError, which is not a failure to report.
+ */
+export function usePageDraft(spaceId?: string, pageId?: string): LoadedDraft {
+    const dispatch = useAppDispatch();
+    const draft = useAppSelector((state) => (pageId ? getDraftForPage(state, pageId) : undefined));
+    const [loadedId, setLoadedId] = useState<string>();
+
+    useEffect(() => {
+        if (!spaceId || !pageId) {
+            return undefined;
+        }
+        const controller = new AbortController();
+
+        dispatch(fetchPageDraft(spaceId, pageId, controller.signal)).
+            then(() => setLoadedId(pageId)).
+            catch((error) => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+
+                // Settled either way: the caller decides what a missing draft means,
+                // and retrying on its own would just fail again.
+                setLoadedId(pageId);
+
+                // eslint-disable-next-line no-console
+                console.error('Docs: failed to load draft', error);
+            });
+
+        return () => controller.abort();
+    }, [dispatch, spaceId, pageId]);
+
+    return {draft, loaded: Boolean(pageId) && loadedId === pageId};
+}
+
+/**
+ * Returns a handler that publishes a draft into its page and routes to that page.
+ *
+ * The arrival replaces: publishing destroys the draft, so its URL is dead and Back
+ * must not return to it.
+ */
+export function usePublishDraft(spaceId: string) {
+    const dispatch = useAppDispatch();
+    const {formatMessage} = useIntl();
+    const {goToPage} = useDocsNavigation();
+
+    return useCallback(async (pageId: string) => {
+        try {
+            const page = await dispatch(publishDraft(spaceId, pageId));
+            goToPage(spaceId, page.id, {replace: true});
+        } catch (error) {
+            // A parent that isn't published yet is the one conflict force can't
+            // resolve, so it gets the instruction that actually helps instead of a
+            // generic failure.
+            if (error instanceof PublishConflictError && error.reason === ConflictReason.ParentUnpublished) {
+                toast.error(formatMessage({
+                    id: 'docs.publish.parentUnpublished',
+                    defaultMessage: 'Publish the parent page first, then publish this one.',
+                }));
+                return;
+            }
+            toast.error(formatMessage({
+                id: 'docs.publish.failed',
+                defaultMessage: 'Could not publish the page. Please try again.',
+            }));
+
+            // eslint-disable-next-line no-console
+            console.error('Docs: failed to publish draft', error);
+        }
+    }, [dispatch, spaceId, goToPage, formatMessage]);
+}
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index ae5308b..071aac9 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -36,7 +36,11 @@ export function useDocsNavigation() {
 
     // Only a routed page can be edited, so the query alone doesn't mean edit mode:
     // ?edit=1 on a space or overview URL names nothing to edit and is ignored.
-    const isEditing = Boolean(pageId) && !isOverview && new URLSearchParams(search).get(EDIT_QUERY) === '1';
+    //
+    // A draft is unpublished work with no published version to read, so its route is
+    // always editing and carries no query — there is no reading mode to toggle to.
+    const isEditing = isDraft ||
+        (Boolean(pageId) && !isOverview && new URLSearchParams(search).get(EDIT_QUERY) === '1');
 
     // `replace` for arrivals that follow the routed page ceasing to exist: the URL
     // being left is dead, so it shouldn't be somewhere Back can return to.
@@ -48,7 +52,17 @@ export function useDocsNavigation() {
             history.push(path);
         }
     }, [history, teamName]);
-    const goToPage = useCallback((space: string, page: string) => history.push(pagePath(teamName, space, page)), [history, teamName]);
+
+    // `replace` for arrivals where the URL being left no longer names anything —
+    // publishing a draft, whose draft URL ceases to exist with it.
+    const goToPage = useCallback((space: string, page: string, {replace = false} = {}) => {
+        const path = pagePath(teamName, space, page);
+        if (replace) {
+            history.replace(path);
+        } else {
+            history.push(path);
+        }
+    }, [history, teamName]);
     const goToDraft = useCallback((space: string, page: string) => history.push(draftPath(teamName, space, page)), [history, teamName]);
     const goToEditPage = useCallback((space: string, page: string) => history.push(editPagePath(teamName, space, page)), [history, teamName]);
     const goToOverview = useCallback((space: string) => history.push(overviewPath(teamName, space)), [history, teamName]);
diff --git a/webapp/src/hooks/pages.test.tsx b/webapp/src/hooks/pages.test.tsx
index e639be7..6585e62 100644
--- a/webapp/src/hooks/pages.test.tsx
+++ b/webapp/src/hooks/pages.test.tsx
@@ -6,12 +6,13 @@ import React from 'react';
 import {IntlProvider} from 'react-intl';
 import {Provider} from 'react-redux';
 
-import {makePage, makeSpace} from 'store/test_fixtures';
+import {makeDraft, makePage, makeSpace} from 'store/test_fixtures';
 
 import {toast} from 'components/toast';
 
 import {SPACE_PROP_DEFAULT_PAGE_ID} from 'types/docs';
 import type {Page, Space} from 'types/docs';
+import type {Draft} from 'types/drafts';
 
 import {useCreateRootPage, useDefaultPagePath} from './pages';
 
@@ -19,26 +20,26 @@ import {makeTestStore} from '../../tests/react_testing_utils';
 
 let mockRoute: {pageId?: string; isOverview: boolean} = {isOverview: false};
 const mockGoToPage = jest.fn();
-const mockGoToEditPage = jest.fn();
+const mockGoToDraft = jest.fn();
 
 jest.mock('hooks/navigation', () => ({
     useDocsNavigation: () => ({
         ...mockRoute,
         goToPage: mockGoToPage,
-        goToEditPage: mockGoToEditPage,
+        goToDraft: mockGoToDraft,
         paths: {page: (spaceId: string, pageId: string) => `/docs/${spaceId}/${pageId}`},
     }),
 }));
 
-const mockCreatePage = jest.fn();
-let mockCreateResult: Promise<Page> = Promise.resolve(makePage('new', 'eng', 'Untitled'));
+const mockCreateDraft = jest.fn();
+let mockCreateResult: Promise<Draft> = Promise.resolve(makeDraft('new', 'eng', 'Untitled'));
 
-// createPage is a thunk the hook awaits for the created page, so the mock has to
+// createDraft is a thunk the hook awaits for the created draft, so the mock has to
 // be a thunk that resolves to one too.
 jest.mock('store/actions', () => ({
     ...jest.requireActual('store/actions'),
-    createPage: (...args: unknown[]) => {
-        mockCreatePage(...args as []);
+    createDraft: (...args: unknown[]) => {
+        mockCreateDraft(...args as []);
         return async () => mockCreateResult;
     },
 }));
@@ -131,19 +132,20 @@ describe('useCreateRootPage', () => {
 
     beforeEach(() => {
         jest.clearAllMocks();
-        mockCreateResult = Promise.resolve(makePage('new', 'eng', 'Untitled'));
+        mockCreateResult = Promise.resolve(makeDraft('new', 'eng', 'Untitled'));
     });
 
-    // A new page is empty and titled "Untitled", so landing on it in reading mode
-    // means a second click before anything can be written.
-    it('opens the new page in edit mode', async () => {
+    // A new page starts as a draft so nobody else sees a half-written page, and it
+    // opens at the draft URL, which is where an unpublished page lives.
+    it('creates a draft and opens it', async () => {
         const create = renderCreate();
 
         await act(async () => {
             await create.current();
         });
 
-        expect(mockGoToEditPage).toHaveBeenCalledWith('eng', 'new');
+        expect(mockCreateDraft).toHaveBeenCalledWith('eng', 'Untitled');
+        expect(mockGoToDraft).toHaveBeenCalledWith('eng', 'new');
         expect(mockGoToPage).not.toHaveBeenCalled();
     });
 
@@ -158,6 +160,6 @@ describe('useCreateRootPage', () => {
         });
 
         expect(toast.error).toHaveBeenCalled();
-        expect(mockGoToEditPage).not.toHaveBeenCalled();
+        expect(mockGoToDraft).not.toHaveBeenCalled();
     });
 });
diff --git a/webapp/src/hooks/pages.ts b/webapp/src/hooks/pages.ts
index 4101844..27b7a7a 100644
--- a/webapp/src/hooks/pages.ts
+++ b/webapp/src/hooks/pages.ts
@@ -4,7 +4,7 @@
 import {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 
-import {createPage} from 'store/actions';
+import {createDraft} from 'store/actions';
 import {getPage} from 'store/selectors';
 
 import {toast} from 'components/toast';
@@ -16,22 +16,27 @@ import {useDocsNavigation} from './navigation';
 import {useAppDispatch, useAppSelector} from './redux';
 
 /**
- * Returns a handler that creates a top-level page in the space and opens it in
- * edit mode. Shared by the page header's add button and the page tree's "Add
- * page". A new page is empty and titled "Untitled", so reading it is never what
- * was wanted; edit mode also focuses the title, which is the first thing to fill
- * in.
+ * Returns a handler that starts a new top-level page in the space and opens it for
+ * writing. Shared by the page header's add button and the page tree's "Add page".
+ *
+ * It creates a *draft*, not a page: nobody else sees a half-written page, and the
+ * author decides when it becomes real by publishing. The draft reserves the page id
+ * up front, which is what makes it addressable at `/drafts/:pageId` before it
+ * exists as a page.
+ *
+ * The draft carries the untitled placeholder as its title because publishing
+ * requires a non-empty one; the title field renders that as empty (see PageTitle).
  */
 export function useCreateRootPage(spaceId: string) {
     const dispatch = useAppDispatch();
-    const {goToEditPage} = useDocsNavigation();
+    const {goToDraft} = useDocsNavigation();
     const {formatMessage} = useIntl();
     const untitled = formatMessage(UNTITLED_PAGE_TITLE);
 
     return useCallback(async () => {
         try {
-            const page = await dispatch(createPage(spaceId, {title: untitled}));
-            goToEditPage(spaceId, page.id);
+            const draft = await dispatch(createDraft(spaceId, untitled));
+            goToDraft(spaceId, draft.page_id);
         } catch (error) {
             // Without this the add-page buttons look inert on failure.
             toast.error(formatMessage({id: 'docs.pageTree.addFailed', defaultMessage: 'Could not create the page. Please try again.'}));
@@ -39,7 +44,7 @@ export function useCreateRootPage(spaceId: string) {
             // eslint-disable-next-line no-console
             console.error('Docs: failed to create page', error);
         }
-    }, [dispatch, spaceId, untitled, goToEditPage, formatMessage]);
+    }, [dispatch, spaceId, untitled, goToDraft, formatMessage]);
 }
 
 /**

From 238220a3dec876616690f5e4ebab2655d82170cc Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 20:01:26 -0500
Subject: [PATCH 61/68] feat(docs): show unpublished pages in the page tree
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Orphan drafts — pages that exist only as the author's draft — now render as
tree rows marked "Draft", visible only to their author.

PageNode carries `id`/`title` directly with `page`/`draft` saying what backs
the row, so the five consumers that keyed off `node.page.id` work for either
kind without branching.

Placement follows from the server's model rather than preference: a draft has
no SortOrder column, so it cannot be interleaved and sorts last in its group —
which is also where publishing appends it, so the position shown is the
position it will take. Drafts order among themselves by create_at, not
update_at, which advances while the author types.

The published/draft boundary is enforced where a move is resolved:

- a draft is neither a drag source nor a drop target, so the positions around
  it are never offered
- Alt+arrow refuses to reorder a draft, and stops a page at the last published
  sibling instead of letting it cross
- each group's append strip renders between its published rows and its drafts,
  since that is where an appended page actually lands

A draft is never a parent — its children could not be published until it was,
and a published page cannot be parented to one at all — so a draft parented to
another draft falls back to the root group rather than nesting or vanishing.

Prompt: keep drafts at the end of the page tree, and block any reordering
operations that would drop a published page AFTER drafts
---
 webapp/i18n/en.json                           |   4 +
 .../components/space_view/page_tree/depth.ts  |   2 +-
 .../space_view/page_tree/keyboard.test.ts     |  50 ++++-
 .../space_view/page_tree/keyboard.ts          |  35 +++-
 .../page_tree/page_tree_node.module.scss      |  15 ++
 .../space_view/page_tree/page_tree_node.tsx   | 172 +++++++++++-------
 .../space_view/page_tree/page_tree_panel.tsx  |  92 ++++++----
 webapp/src/store/page_tree.test.ts            |  93 +++++++++-
 webapp/src/store/page_tree.ts                 | 119 +++++++++---
 9 files changed, 432 insertions(+), 150 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 7c6a09b..3df3389 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -94,6 +94,7 @@
   "docs.pageTree.add": "Add page",
   "docs.pageTree.addFailed": "Could not create the page. Please try again.",
   "docs.pageTree.collapse": "Collapse {title}",
+  "docs.pageTree.draft": "Draft",
   "docs.pageTree.expand": "Expand {title}",
   "docs.pageTree.favorited": "Favorited",
   "docs.pageTree.keyboardHelp": "Use the arrow keys to move through pages. Hold Alt with an arrow key to move the selected page up, down, in, or out.",
@@ -104,6 +105,8 @@
   "docs.pageTree.nestBlocked": "Cannot nest {title} deeper than {levels} levels.",
   "docs.pageTree.overview": "Overview",
   "docs.pageTree.topLevel": "top level",
+  "docs.publish.failed": "Could not publish the page. Please try again.",
+  "docs.publish.parentUnpublished": "Publish the parent page first, then publish this one.",
   "docs.renamePage.confirm": "Save",
   "docs.renamePage.label": "Page name",
   "docs.renamePage.title": "Rename page",
@@ -169,6 +172,7 @@
   "docs.space.menu.settings": "Space settings",
   "docs.space.more": "More actions",
   "docs.space.pages": "Pages",
+  "docs.space.publish": "Publish",
   "docs.space.share": "Share",
   "docs.space.stat.members": "Members",
   "docs.space.stat.pages": "Pages",
diff --git a/webapp/src/components/space_view/page_tree/depth.ts b/webapp/src/components/space_view/page_tree/depth.ts
index 4ff19e1..c94e66f 100644
--- a/webapp/src/components/space_view/page_tree/depth.ts
+++ b/webapp/src/components/space_view/page_tree/depth.ts
@@ -18,7 +18,7 @@ export function buildSubtreeHeightMap(roots: PageNode[]): Map<string, number> {
         for (const child of node.children) {
             height = Math.max(height, measure(child) + 1);
         }
-        map.set(node.page.id, height);
+        map.set(node.id, height);
         return height;
     };
 
diff --git a/webapp/src/components/space_view/page_tree/keyboard.test.ts b/webapp/src/components/space_view/page_tree/keyboard.test.ts
index 61ec7ec..5f46586 100644
--- a/webapp/src/components/space_view/page_tree/keyboard.test.ts
+++ b/webapp/src/components/space_view/page_tree/keyboard.test.ts
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {buildPageTree} from 'store/page_tree';
-import {makePage} from 'store/test_fixtures';
+import {makeDraft, makePage} from 'store/test_fixtures';
 
 import type {Page} from 'types/docs';
 
@@ -38,7 +38,7 @@ describe('flattenVisibleRows', () => {
     it('lists rows in visual order with their parent', () => {
         const {roots} = treeOf(pages);
 
-        expect(flattenVisibleRows(roots, new Set()).map((row) => [row.node.page.id, row.parentId])).toEqual([
+        expect(flattenVisibleRows(roots, new Set()).map((row) => [row.node.id, row.parentId])).toEqual([
             ['a', ''],
             ['a1', 'a'],
             ['a2', 'a'],
@@ -49,7 +49,7 @@ describe('flattenVisibleRows', () => {
     it('omits the subtree of a collapsed node', () => {
         const {roots} = treeOf(pages);
 
-        expect(flattenVisibleRows(roots, new Set(['a'])).map((row) => row.node.page.id)).toEqual(['a', 'b']);
+        expect(flattenVisibleRows(roots, new Set(['a'])).map((row) => row.node.id)).toEqual(['a', 'b']);
     });
 });
 
@@ -115,3 +115,47 @@ describe('resolveReorder', () => {
         expect(resolveReorder(roots, heights, 'nope', 'up')).toEqual({blocked: 'boundary'});
     });
 });
+
+describe('resolveReorder with drafts in the group', () => {
+    const draftRow = (pageId: string, parentId = '') => ({
+        ...makeDraft(pageId, 'space1', pageId),
+        parent_id: parentId,
+    });
+
+    const treeWithDrafts = (list: Page[], drafts: Array<ReturnType<typeof draftRow>>) => {
+        const roots = buildPageTree(list, drafts);
+        return {roots, heights: buildSubtreeHeightMap(roots)};
+    };
+
+    // Drafts hold the tail of the group. Letting a page move past one would claim a
+    // position the server cannot store, and publishing appends anyway.
+    it('stops a page moving down past the drafts', () => {
+        const {roots, heights} = treeWithDrafts(pages, [draftRow('d1')]);
+
+        // 'b' is the last published root, with a draft rendered after it.
+        expect(resolveReorder(roots, heights, 'b', 'down')).toEqual({blocked: 'boundary'});
+
+        // Moving up is unaffected — that stays inside the published run.
+        expect(resolveReorder(roots, heights, 'b', 'up')).toEqual({
+            move: {pageId: 'b', parentId: '', siblingIndex: 0},
+        });
+    });
+
+    // No stored order to write, and making room would move a published sibling.
+    // Reported as a boundary so the gesture is announced rather than ignored.
+    it('refuses to reorder a draft at all', () => {
+        const {roots, heights} = treeWithDrafts(pages, [draftRow('d1')]);
+
+        for (const intent of ['up', 'down', 'indent', 'outdent'] as const) {
+            expect(resolveReorder(roots, heights, 'd1', intent)).toEqual({blocked: 'boundary'});
+        }
+    });
+
+    it('leaves a group with no drafts reordering as before', () => {
+        const {roots, heights} = treeWithDrafts(pages, []);
+
+        expect(resolveReorder(roots, heights, 'a', 'down')).toEqual({
+            move: {pageId: 'a', parentId: '', siblingIndex: 1},
+        });
+    });
+});
diff --git a/webapp/src/components/space_view/page_tree/keyboard.ts b/webapp/src/components/space_view/page_tree/keyboard.ts
index bd578d5..3c699c3 100644
--- a/webapp/src/components/space_view/page_tree/keyboard.ts
+++ b/webapp/src/components/space_view/page_tree/keyboard.ts
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {publishedCount} from 'store/page_tree';
 import type {PageNode} from 'store/page_tree';
 
 import {MAX_PAGE_DEPTH} from './depth';
@@ -42,8 +43,8 @@ export function flattenVisibleRows(roots: PageNode[], collapsed: Set<string>): V
     const walk = (nodes: PageNode[], parentId: string) => {
         for (const node of nodes) {
             rows.push({node, parentId});
-            if (!collapsed.has(node.page.id)) {
-                walk(node.children, node.page.id);
+            if (!collapsed.has(node.id)) {
+                walk(node.children, node.id);
             }
         }
     };
@@ -63,12 +64,12 @@ type Position = {
 // that group. Returns null for an id the tree doesn't hold.
 function findPosition(roots: PageNode[], pageId: string): Position | null {
     const search = (nodes: PageNode[], parentId: string): Position | null => {
-        const index = nodes.findIndex((node) => node.page.id === pageId);
+        const index = nodes.findIndex((node) => node.id === pageId);
         if (index !== -1) {
             return {node: nodes[index], parentId, siblings: nodes, index};
         }
         for (const node of nodes) {
-            const found = search(node.children, node.page.id);
+            const found = search(node.children, node.id);
             if (found) {
                 return found;
             }
@@ -97,26 +98,44 @@ export function resolveReorder(
         return BOUNDARY;
     }
 
-    const {parentId, siblings, index} = position;
+    const {node, parentId, siblings, index} = position;
+
+    // An unpublished page has no stored order to write, and reordering it would have
+    // to move a published sibling to make room. It reports as a boundary so the
+    // gesture is announced as refused rather than silently doing nothing.
+    if (!node.page) {
+        return BOUNDARY;
+    }
+
+    // Drafts occupy the tail of the group, and a published page may not be moved past
+    // them: it would claim a position the server cannot express, and publishing a
+    // draft appends anyway. So the last position available to a page is the last
+    // published one.
+    const lastPublished = publishedCount(siblings) - 1;
 
     switch (intent) {
     case 'up':
         return index === 0 ? BOUNDARY : {move: {pageId, parentId, siblingIndex: index - 1}};
 
     case 'down':
-        return index === siblings.length - 1 ? BOUNDARY : {move: {pageId, parentId, siblingIndex: index + 1}};
+        return index === lastPublished ? BOUNDARY : {move: {pageId, parentId, siblingIndex: index + 1}};
 
-    // Nest under the preceding sibling, as its last child.
+    // Nest under the preceding sibling, as its last child. A draft cannot be a
+    // parent, but drafts sort after every published sibling, so the row before a
+    // page is always a page — the guard is here for the claim, not for a live case.
     case 'indent': {
         if (index === 0) {
             return BOUNDARY;
         }
         const newParent = siblings[index - 1];
+        if (!newParent.page) {
+            return BOUNDARY;
+        }
         const deepest = newParent.depth + 1 + (subtreeHeights.get(pageId) ?? 0);
         if (deepest > MAX_PAGE_DEPTH) {
             return {blocked: 'depth'};
         }
-        return {move: {pageId, parentId: newParent.page.id, siblingIndex: newParent.children.length}};
+        return {move: {pageId, parentId: newParent.id, siblingIndex: newParent.children.length}};
     }
 
     // Become the parent's next sibling. Always shallower, so the cap can't bite.
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
index ba5996e..6ec1ba9 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
@@ -172,3 +172,18 @@
     flex-direction: column;
     min-width: 0;
 }
+
+// Marks a row as the author's own unpublished page. Text rather than an icon: it
+// has to say which state this is, and "Draft" is shorter than any tooltip
+// explaining a glyph.
+.draftBadge {
+    flex-shrink: 0;
+    padding: 0 4px;
+    border-radius: 4px;
+    background: rgba(var(--center-channel-color-rgb), 0.08);
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    text-transform: uppercase;
+}
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index dab2a5d..0ce388b 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -7,7 +7,7 @@ import {useIsFavorite} from 'hooks/favorites';
 import {useTextOverflow} from 'hooks/text_overflow';
 import React, {useState} from 'react';
 import {createPortal} from 'react-dom';
-import {useIntl} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
 import ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';
@@ -56,34 +56,44 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
     const [titleOverflowing, titleRef] = useTextOverflow();
 
     // Narrow subscription: only this page's own favorite state re-renders the row.
-    const favorited = useIsFavorite('page', node.page.id);
-    const {page, children, depth} = node;
+    const favorited = useIsFavorite('page', node.id);
+    const {id, page, draft, children, depth} = node;
     const hasChildren = children.length > 0;
-    const isCollapsed = collapsed.has(page.id);
+    const isCollapsed = collapsed.has(id);
 
-    // A group only needs a trailing append strip when its last row is expanded:
-    // that row's own bottom edge would be drawn above its children while meaning
-    // "after them". Any other last row — a leaf, or a collapsed parent — has
+    // Published rows first, drafts after — kept apart so the append strip can sit
+    // between them (see the render below).
+    const publishedChildren = children.filter((child) => child.page);
+    const draftChildren = children.filter((child) => !child.page);
+
+    // A group only needs a trailing append strip when its last published row is
+    // expanded: that row's own bottom edge would be drawn above its children while
+    // meaning "after them". Any other last row — a leaf, or a collapsed parent — has
     // nothing below it, so its bottom edge already reads correctly.
-    const lastChild = children[children.length - 1];
-    const lastChildExpanded = Boolean(lastChild) && lastChild.children.length > 0 && !collapsed.has(lastChild.page.id);
+    const lastChild = publishedChildren[publishedChildren.length - 1];
+    const lastChildExpanded = Boolean(lastChild) && lastChild.children.length > 0 && !collapsed.has(lastChild.id);
 
     // A drag can never drop into its own subtree; those rows aren't drop targets
     // (truthful canDrop), so mark them as an invalid zone for the whole drag.
-    const inDraggedSubtree = draggingId !== null && draggingId !== page.id && (descendants.get(draggingId)?.has(page.id) ?? false);
-    const isActive = page.id === activePageId;
+    const inDraggedSubtree = draggingId !== null && draggingId !== id && (descendants.get(draggingId)?.has(id) ?? false);
+    const isActive = id === activePageId;
 
-    const toggleLabel = isCollapsed ? formatMessage({id: 'docs.pageTree.expand', defaultMessage: 'Expand {title}'}, {title: page.title}) : formatMessage({id: 'docs.pageTree.collapse', defaultMessage: 'Collapse {title}'}, {title: page.title});
-    const menuLabel = formatMessage({id: 'docs.pageTree.menu', defaultMessage: 'Page options for {title}'}, {title: page.title});
+    const toggleLabel = isCollapsed ? formatMessage({id: 'docs.pageTree.expand', defaultMessage: 'Expand {title}'}, {title: node.title}) : formatMessage({id: 'docs.pageTree.collapse', defaultMessage: 'Collapse {title}'}, {title: node.title});
+    const menuLabel = formatMessage({id: 'docs.pageTree.menu', defaultMessage: 'Page options for {title}'}, {title: node.title});
     const favoriteLabel = formatMessage({id: 'docs.pageTree.favorited', defaultMessage: 'Favorited'});
 
     const {dragging, dropTarget, blocked, previewContainer} = usePageDragDrop({
-        pageId: page.id,
+        pageId: id,
         element,
-        enabled: dndEnabled,
+
+        // An unpublished page is neither a drag source nor a drop target: it has no
+        // stored order to rewrite, it cannot be a parent, and a published page must
+        // not land after it. Disabling the row is what enforces all three — the
+        // positions around it simply aren't offered.
+        enabled: dndEnabled && Boolean(page),
         expanded: hasChildren && !isCollapsed,
         canDrop: (sourceId, mode) => {
-            if (descendants.get(sourceId)?.has(page.id)) {
+            if (descendants.get(sourceId)?.has(id)) {
                 return false;
             }
 
@@ -98,7 +108,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
     // Shift-click expands/collapses the whole subtree: apply this node's next
     // state to it and all of its descendants at once.
     const toggleRecursive = () => {
-        const ids = [page.id, ...(descendants.get(page.id) ?? [])];
+        const ids = [id, ...(descendants.get(id) ?? [])];
         onSetCollapsed(ids, !isCollapsed);
     };
 
@@ -107,7 +117,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
             toggleRecursive();
             return;
         }
-        onSelect(page.id);
+        onSelect(id);
     };
 
     const onChevronClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -116,7 +126,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
             toggleRecursive();
             return;
         }
-        onToggle(page.id);
+        onToggle(id);
     };
 
     // Treeitems nest, so key and focus events from a descendant row bubble through
@@ -137,23 +147,43 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
             setMenuOpen(true);
             return;
         }
-        onRowKeyDown(event, page.id);
+        onRowKeyDown(event, id);
     };
 
     const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {
         if (isOwnEvent(event)) {
-            onFocusRow(page.id);
+            onFocusRow(id);
         }
     };
 
+    const renderChild = (child: PageNode) => (
+        <PageTreeNode
+            key={child.id}
+            node={child}
+            activePageId={activePageId}
+            collapsed={collapsed}
+            descendants={descendants}
+            subtreeHeights={subtreeHeights}
+            draggingId={draggingId}
+            dndEnabled={dndEnabled}
+            tabStopId={tabStopId}
+            onSelect={onSelect}
+            onToggle={onToggle}
+            onSetCollapsed={onSetCollapsed}
+            onFocusRow={onFocusRow}
+            onRowKeyDown={onRowKeyDown}
+            registerRow={registerRow}
+        />
+    );
+
     // Three elements, three jobs: the hit wrapper is the drag/drop target (its box
     // includes the spacing around the row, so a drag between rows still lands in
     // one), the row inside it is what's painted, and the outer treeitem takes focus.
     const setRowElement = (next: HTMLDivElement | null) => setElement(next);
 
-    const setNodeElement = (next: HTMLDivElement | null) => registerRow(page.id, next);
+    const setNodeElement = (next: HTMLDivElement | null) => registerRow(id, next);
 
-    const PageGlyph = page.type === 'page_folder' ? FolderOutlineIcon : FileTextOutlineIcon;
+    const PageGlyph = page?.type === 'page_folder' ? FolderOutlineIcon : FileTextOutlineIcon;
 
     // Only a clipped title gets a tooltip; a fully visible one would just repeat
     // the text under the pointer. Suppressed for the whole tree during a drag: the
@@ -161,14 +191,14 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
     // over the drop indicator hides the thing the user is aiming with.
     const title = (
         <WithTooltip
-            title={page.title}
+            title={node.title}
             disabled={!titleOverflowing || draggingId !== null}
         >
             <span
                 ref={titleRef}
                 className={styles.title}
             >
-                {page.title}
+                {node.title}
             </span>
         </WithTooltip>
     );
@@ -183,7 +213,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
             ref={setNodeElement}
             className={styles.node}
             role='treeitem'
-            tabIndex={tabStopId === page.id ? 0 : -1}
+            tabIndex={tabStopId === id ? 0 : -1}
             aria-level={depth + 1}
             aria-selected={isActive}
             aria-expanded={hasChildren ? !isCollapsed : undefined}
@@ -229,7 +259,15 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                         <PageGlyph size={16}/>
                     </span>
                     {title}
-                    {favorited && (
+                    {draft && (
+                        <span className={styles.draftBadge}>
+                            <FormattedMessage
+                                id='docs.pageTree.draft'
+                                defaultMessage='Draft'
+                            />
+                        </span>
+                    )}
+                    {favorited && page && (
                         <span
                             className={styles.favorite}
                             aria-label={favoriteLabel}
@@ -239,25 +277,31 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                         </span>
                     )}
                     <Spacer/>
-                    <PageMenu
-                        spaceId={page.space_id}
-                        pageId={page.id}
-                        pageTitle={page.title}
-                        align='right'
-                        open={menuOpen}
-                        onOpenChange={setMenuOpen}
-                        trigger={(
-                            <button
-                                type='button'
-                                className={styles.menuTrigger}
-                                tabIndex={-1}
-                                aria-label={menuLabel}
-                                onClick={(event) => event.stopPropagation()}
-                            >
-                                <DotsHorizontalIcon size={16}/>
-                            </button>
-                        )}
-                    />
+
+                    {/* Every entry in the page menu — rename, favorite, copy link,
+                        delete — acts on a published page. An unpublished one is
+                        managed from the page itself, where Publish and Discard are. */}
+                    {page && (
+                        <PageMenu
+                            spaceId={page.space_id}
+                            pageId={id}
+                            pageTitle={node.title}
+                            align='right'
+                            open={menuOpen}
+                            onOpenChange={setMenuOpen}
+                            trigger={(
+                                <button
+                                    type='button'
+                                    className={styles.menuTrigger}
+                                    tabIndex={-1}
+                                    aria-label={menuLabel}
+                                    onClick={(event) => event.stopPropagation()}
+                                >
+                                    <DotsHorizontalIcon size={16}/>
+                                </button>
+                            )}
+                        />
+                    )}
                 </div>
                 {/* Indented to the destination's level: the line spans the hit
                     wrapper, which is full width, but the page would land as this
@@ -271,8 +315,8 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
             </div>
             {previewContainer && createPortal(
                 <PageDragPreview
-                    title={page.title}
-                    type={page.type}
+                    title={node.title}
+                    type={page?.type ?? 'page'}
                     childCount={children.length}
                 />,
                 previewContainer,
@@ -282,35 +326,23 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                     className={styles.children}
                     role='group'
                 >
-                    {children.map((child) => (
-                        <PageTreeNode
-                            key={child.page.id}
-                            node={child}
-                            activePageId={activePageId}
-                            collapsed={collapsed}
-                            descendants={descendants}
-                            subtreeHeights={subtreeHeights}
-                            draggingId={draggingId}
-                            dndEnabled={dndEnabled}
-                            tabStopId={tabStopId}
-                            onSelect={onSelect}
-                            onToggle={onToggle}
-                            onSetCollapsed={onSetCollapsed}
-                            onFocusRow={onFocusRow}
-                            onRowKeyDown={onRowKeyDown}
-                            registerRow={registerRow}
-                        />
-                    ))}
+                    {publishedChildren.map(renderChild)}
+
+                    {/* Between the published rows and the drafts, not after both: a
+                        drop here appends to the published run, which is the only
+                        place a published page can go. Drawn below the drafts it
+                        would point at a position no page can take. */}
                     {lastChildExpanded && (
                         <PageTreeAppendZone
-                            parentId={page.id}
+                            parentId={id}
                             indent={(depth + 1) * INDENT_STEP}
                             enabled={dndEnabled}
-                            canDrop={(sourceId) => !descendants.get(sourceId)?.has(page.id) &&
-                                sourceId !== page.id &&
+                            canDrop={(sourceId) => !descendants.get(sourceId)?.has(id) &&
+                                sourceId !== id &&
                                 depth + 1 + (subtreeHeights.get(sourceId) ?? 0) <= MAX_PAGE_DEPTH}
                         />
                     )}
+                    {draftChildren.map(renderChild)}
                 </div>
             )}
         </div>
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
index 686b0bb..35a760e 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
@@ -12,7 +12,8 @@ import PlusIcon from '@mattermost/compass-icons/components/plus';
 
 import {movePage} from 'store/actions';
 import {buildDescendantMap, buildPageTree} from 'store/page_tree';
-import {getPagesForSpace} from 'store/selectors';
+import type {PageNode} from 'store/page_tree';
+import {getOrphanDraftsForSpace, getPagesForSpace} from 'store/selectors';
 
 import {Button} from 'components/form_controls/button';
 import {announce} from 'components/readout';
@@ -46,15 +47,25 @@ const PageTreePanel = ({space}: {space: Space}) => {
     const createRootPage = useCreateRootPage(space.id);
 
     const pages = useAppSelector((state) => getPagesForSpace(state, space.id));
-    const roots = useMemo(() => buildPageTree(pages), [pages]);
+
+    // Only drafts with no published page get a row. Unpublished edits to a page
+    // already in the tree belong on that page's own row, not on a second one.
+    const orphanDrafts = useAppSelector((state) => getOrphanDraftsForSpace(state, space.id));
+    const roots = useMemo(() => buildPageTree(pages, orphanDrafts), [pages, orphanDrafts]);
     const descendants = useMemo(() => buildDescendantMap(roots), [roots]);
     const subtreeHeights = useMemo(() => buildSubtreeHeightMap(roots), [roots]);
     const visibleRows = useMemo(() => flattenVisibleRows(roots, collapsed), [roots, collapsed]);
 
+    // Published rows first, drafts after; split so the root append strip lands
+    // between them rather than below the drafts (see the render).
+    const publishedRoots = roots.filter((node) => node.page);
+    const draftRoots = roots.filter((node) => !node.page);
+
     // See the trailing append strip below: the root group needs one only when its
-    // last row is expanded, and so has children rendered beneath its bottom edge.
-    const lastRoot = roots[roots.length - 1];
-    const lastRootExpanded = Boolean(lastRoot) && lastRoot.children.length > 0 && !collapsed.has(lastRoot.page.id);
+    // last published row is expanded, and so has children rendered beneath its
+    // bottom edge.
+    const lastRoot = publishedRoots[publishedRoots.length - 1];
+    const lastRootExpanded = Boolean(lastRoot) && lastRoot.children.length > 0 && !collapsed.has(lastRoot.id);
 
     // The tree is a single tab stop (roving tabindex), so it tracks which row owns
     // it. Focus itself moves imperatively through the registry below rather than
@@ -100,7 +111,7 @@ const PageTreePanel = ({space}: {space: Space}) => {
     // back. It only ever reclaims focus the tree just lost, never steals it.
     // Layout effect so there's no painted frame without a focus ring.
     useLayoutEffect(() => {
-        const index = visibleRows.findIndex((row) => row.node.page.id === focusedId);
+        const index = visibleRows.findIndex((row) => row.node.id === focusedId);
         if (index !== -1) {
             focusIndex.current = index;
         }
@@ -118,7 +129,7 @@ const PageTreePanel = ({space}: {space: Space}) => {
             return;
         }
 
-        const targetId = target.node.page.id;
+        const targetId = target.node.id;
         setFocusedId(targetId);
         rowElements.current.get(targetId)?.focus();
     }, [visibleRows, focusedId]);
@@ -170,7 +181,7 @@ const PageTreePanel = ({space}: {space: Space}) => {
     // One handler for the whole tree: the panel is what knows the visible order,
     // so a row would only have to hand these decisions back anyway.
     const onRowKeyDown = useCallback((event: React.KeyboardEvent, rowId: string) => {
-        const index = visibleRows.findIndex((row) => row.node.page.id === rowId);
+        const index = visibleRows.findIndex((row) => row.node.id === rowId);
         if (index === -1) {
             return;
         }
@@ -189,19 +200,19 @@ const PageTreePanel = ({space}: {space: Space}) => {
         switch (event.key) {
         case 'ArrowDown':
             if (index < visibleRows.length - 1) {
-                focusRow(visibleRows[index + 1].node.page.id);
+                focusRow(visibleRows[index + 1].node.id);
             }
             break;
         case 'ArrowUp':
             if (index > 0) {
-                focusRow(visibleRows[index - 1].node.page.id);
+                focusRow(visibleRows[index - 1].node.id);
             }
             break;
         case 'Home':
-            focusRow(visibleRows[0].node.page.id);
+            focusRow(visibleRows[0].node.id);
             break;
         case 'End':
-            focusRow(visibleRows[visibleRows.length - 1].node.page.id);
+            focusRow(visibleRows[visibleRows.length - 1].node.id);
             break;
 
         // Expand, then step into the subtree — the first child is the next
@@ -210,7 +221,7 @@ const PageTreePanel = ({space}: {space: Space}) => {
             if (hasChildren && isCollapsed) {
                 toggle(rowId);
             } else if (hasChildren) {
-                focusRow(visibleRows[index + 1].node.page.id);
+                focusRow(visibleRows[index + 1].node.id);
             }
             break;
 
@@ -236,16 +247,36 @@ const PageTreePanel = ({space}: {space: Space}) => {
     // The row that owns the tab stop: wherever focus last was, else the routed
     // page, else the first row — so Tab always lands somewhere sensible.
     const tabStopId = useMemo(() => {
-        const isVisible = (id: string | null | undefined) => Boolean(id) && visibleRows.some((row) => row.node.page.id === id);
+        const isVisible = (id: string | null | undefined) => Boolean(id) && visibleRows.some((row) => row.node.id === id);
         if (focusedId && isVisible(focusedId)) {
             return focusedId;
         }
         if (isVisible(pageId)) {
             return pageId;
         }
-        return visibleRows[0]?.node.page.id;
+        return visibleRows[0]?.node.id;
     }, [focusedId, pageId, visibleRows]);
 
+    const renderRoot = (node: PageNode) => (
+        <PageTreeNode
+            key={node.id}
+            node={node}
+            activePageId={pageId}
+            collapsed={collapsed}
+            descendants={descendants}
+            subtreeHeights={subtreeHeights}
+            draggingId={draggingId}
+            dndEnabled={true}
+            tabStopId={tabStopId}
+            onSelect={(id) => goToPage(space.id, id)}
+            onToggle={toggle}
+            onSetCollapsed={setCollapsedFor}
+            onFocusRow={onFocusRow}
+            onRowKeyDown={onRowKeyDown}
+            registerRow={registerRow}
+        />
+    );
+
     return (
         <div className={styles.panel}>
             <SpaceHomeItem space={space}/>
@@ -257,29 +288,13 @@ const PageTreePanel = ({space}: {space: Space}) => {
                 aria-describedby={PAGES_KEYBOARD_HELP_ID}
                 onBlur={onTreeBlur}
             >
-                {roots.map((node) => (
-                    <PageTreeNode
-                        key={node.page.id}
-                        node={node}
-                        activePageId={pageId}
-                        collapsed={collapsed}
-                        descendants={descendants}
-                        subtreeHeights={subtreeHeights}
-                        draggingId={draggingId}
-                        dndEnabled={true}
-                        tabStopId={tabStopId}
-                        onSelect={(id) => goToPage(space.id, id)}
-                        onToggle={toggle}
-                        onSetCollapsed={setCollapsedFor}
-                        onFocusRow={onFocusRow}
-                        onRowKeyDown={onRowKeyDown}
-                        registerRow={registerRow}
-                    />
-                ))}
-                {/* Only when the last root is expanded: otherwise its own bottom
-                    edge already means "last at root" and is drawn in the right
-                    place. Appending at root puts the moved page at depth 0, so
-                    only its own subtree has to fit under the cap. */}
+                {publishedRoots.map(renderRoot)}
+
+                {/* Only when the last published root is expanded: otherwise its own
+                    bottom edge already means "last at root" and is drawn in the right
+                    place. Appending at root puts the moved page at depth 0, so only
+                    its own subtree has to fit under the cap. Placed before the draft
+                    rows, since that is where an appended page actually lands. */}
                 {lastRootExpanded && (
                     <PageTreeAppendZone
                         parentId=''
@@ -288,6 +303,7 @@ const PageTreePanel = ({space}: {space: Space}) => {
                         canDrop={(sourceId) => (subtreeHeights.get(sourceId) ?? 0) <= MAX_PAGE_DEPTH}
                     />
                 )}
+                {draftRoots.map(renderRoot)}
             </div>
 
             <p
diff --git a/webapp/src/store/page_tree.test.ts b/webapp/src/store/page_tree.test.ts
index f9121e1..deb148e 100644
--- a/webapp/src/store/page_tree.test.ts
+++ b/webapp/src/store/page_tree.test.ts
@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {buildDescendantMap, buildPageTree} from './page_tree';
-import {makePage} from './test_fixtures';
+import {buildDescendantMap, buildPageTree, publishedCount} from './page_tree';
+import {makeDraft, makePage} from './test_fixtures';
 
 const child = (id: string, parentId: string, title: string, sortOrder = 0) => ({
     ...makePage(id, 'space-a', title, sortOrder),
@@ -19,22 +19,99 @@ describe('buildPageTree', () => {
 
         const tree = buildPageTree([root1, root2, c1, c2, g1]);
 
-        expect(tree.map((node) => node.page.id)).toEqual(['r2', 'r1']);
+        expect(tree.map((node) => node.id)).toEqual(['r2', 'r1']);
 
-        const r1Node = tree.find((node) => node.page.id === 'r1')!;
+        const r1Node = tree.find((node) => node.id === 'r1')!;
         expect(r1Node.depth).toBe(0);
-        expect(r1Node.children.map((node) => node.page.id)).toEqual(['c2', 'c1']);
+        expect(r1Node.children.map((node) => node.id)).toEqual(['c2', 'c1']);
 
-        const c2Node = r1Node.children.find((node) => node.page.id === 'c2')!;
+        const c2Node = r1Node.children.find((node) => node.id === 'c2')!;
         expect(c2Node.depth).toBe(1);
-        expect(c2Node.children.map((node) => node.page.id)).toEqual(['g1']);
+        expect(c2Node.children.map((node) => node.id)).toEqual(['g1']);
         expect(c2Node.children[0].depth).toBe(2);
     });
 
     it('treats pages with a missing parent as roots', () => {
         const orphan = child('o1', 'gone', 'Orphan', 0);
         const tree = buildPageTree([orphan]);
-        expect(tree.map((node) => node.page.id)).toEqual(['o1']);
+        expect(tree.map((node) => node.id)).toEqual(['o1']);
+    });
+});
+
+describe('buildPageTree with drafts', () => {
+    const draftUnder = (pageId: string, parentId: string, title: string, createAt = 0) => ({
+        ...makeDraft(pageId, 'space-a', title, 0, 0),
+        parent_id: parentId,
+        create_at: createAt,
+    });
+
+    // Drafts have no SortOrder column, so they cannot be interleaved — and publishing
+    // appends, so last is also where the page will land.
+    it('puts drafts after every published sibling in their group', () => {
+        const root = makePage('r1', 'space-a', 'Root', 1);
+        const other = makePage('r2', 'space-a', 'Other', 2);
+        const draft = draftUnder('d1', '', 'Unpublished');
+
+        const tree = buildPageTree([root, other], [draft]);
+
+        expect(tree.map((node) => node.id)).toEqual(['r1', 'r2', 'd1']);
+        expect(tree[2].draft).toEqual(draft);
+        expect(tree[2].page).toBeUndefined();
+        expect(tree[2].title).toBe('Unpublished');
+    });
+
+    it('nests a draft under the published page it is parented to', () => {
+        const root = makePage('r1', 'space-a', 'Root', 1);
+        const published = child('c1', 'r1', 'Child', 1);
+        const draft = draftUnder('d1', 'r1', 'Unpublished');
+
+        const tree = buildPageTree([root, published], [draft]);
+
+        expect(tree[0].children.map((node) => node.id)).toEqual(['c1', 'd1']);
+        expect(tree[0].children[1].depth).toBe(1);
+    });
+
+    // create_at, not update_at: update_at advances while the author types, which
+    // would move the row mid-edit.
+    it('orders drafts among themselves by creation time', () => {
+        const later = draftUnder('d2', '', 'Second', 200);
+        const earlier = draftUnder('d1', '', 'First', 100);
+
+        expect(buildPageTree([], [later, earlier]).map((node) => node.id)).toEqual(['d1', 'd2']);
+    });
+
+    // A draft cannot be a parent: its children could not be published until it was,
+    // and a published page cannot be parented to one at all. Falling back to the root
+    // keeps it visible instead of nesting or dropping it.
+    it('treats a draft parented to another draft as a root', () => {
+        const parent = draftUnder('d1', '', 'Parent', 100);
+        const nested = draftUnder('d2', 'd1', 'Nested', 200);
+
+        const tree = buildPageTree([], [parent, nested]);
+
+        expect(tree.map((node) => node.id)).toEqual(['d1', 'd2']);
+        expect(tree[0].children).toEqual([]);
+    });
+
+    // Guards the duplicate-row trap: unpublished edits to a page already in the tree
+    // are a marker on its row, never a second row.
+    it('skips a draft whose page is published', () => {
+        const published = makePage('p1', 'space-a', 'Published', 1);
+        const edits = draftUnder('p1', '', 'Edited');
+
+        expect(buildPageTree([published], [edits]).map((node) => node.id)).toEqual(['p1']);
+    });
+});
+
+describe('publishedCount', () => {
+    it('counts only the published rows, which is where the boundary sits', () => {
+        const tree = buildPageTree(
+            [makePage('p1', 'space-a', 'One', 1), makePage('p2', 'space-a', 'Two', 2)],
+            [{...makeDraft('d1', 'space-a', 'Draft'), parent_id: ''}],
+        );
+
+        expect(publishedCount(tree)).toBe(2);
+        expect(publishedCount([])).toBe(0);
     });
 });
 
diff --git a/webapp/src/store/page_tree.ts b/webapp/src/store/page_tree.ts
index ff16e3d..b9549ee 100644
--- a/webapp/src/store/page_tree.ts
+++ b/webapp/src/store/page_tree.ts
@@ -2,11 +2,25 @@
 // See LICENSE.txt for license information.
 
 import type {Page} from 'types/docs';
+import type {Draft} from 'types/drafts';
 
-// A node in the page tree: the page, its ordered children, and its depth from
-// the roots (roots are depth 0).
+/**
+ * A row in the page tree: a published page, or one of the caller's own unpublished
+ * ones, plus its ordered children and its depth from the roots (roots are depth 0).
+ *
+ * `id` and `title` are what a row is read by, whichever backs it — a draft reserves
+ * its page id at creation, so both share one id namespace and callers can key,
+ * compare and focus on `id` without caring which kind they hold.
+ *
+ * Exactly one of `page`/`draft` is set. A draft row differs in ways the tree has to
+ * respect: only its author can see it, it has no stored sort order, and it is never
+ * a parent (see buildPageTree).
+ */
 export type PageNode = {
-    page: Page;
+    id: string;
+    title: string;
+    page?: Page;
+    draft?: Draft;
     children: PageNode[];
     depth: number;
 };
@@ -14,46 +28,107 @@ export type PageNode = {
 const bySortOrder = (a: Page, b: Page): number =>
     a.sort_order - b.sort_order || a.title.localeCompare(b.title);
 
-// Builds the page tree from a flat page list. Roots have parent_id === ''.
-// Children are ordered by sort_order (title as a stable tiebreak). Pages whose
-// parent isn't present are treated as roots so nothing is silently dropped.
-export function buildPageTree(pages: Page[]): PageNode[] {
-    const byParent = new Map<string, Page[]>();
-    const ids = new Set(pages.map((page) => page.id));
+// Drafts have no stored order, so creation order stands in. Deliberately not
+// update_at: that advances as the author types — and the server bumps it for
+// maintenance writes too — which would move a row while it was being edited.
+const byCreateAt = (a: Draft, b: Draft): number =>
+    a.create_at - b.create_at || a.page_id.localeCompare(b.page_id);
 
+const group = <T>(map: Map<string, T[]>, key: string, value: T) => {
+    const existing = map.get(key);
+    if (existing) {
+        existing.push(value);
+    } else {
+        map.set(key, [value]);
+    }
+};
+
+/**
+ * Builds the page tree from a flat page list, with the caller's unpublished pages
+ * merged in. Roots have parent_id === ''. Pages whose parent isn't present are
+ * treated as roots so nothing is silently dropped.
+ *
+ * `drafts` should be the space's *orphan* drafts (getOrphanDraftsForSpace):
+ * unpublished edits to a page already in the tree are a marker on that page's row,
+ * not a row of their own. A draft naming a published page is skipped here as well,
+ * so passing the wrong set cannot render a page twice.
+ *
+ * Two placement rules, both consequences of the server's model rather than choices:
+ *
+ *  - **Drafts come last in their group.** There is no SortOrder column for drafts,
+ *    so one cannot be interleaved with its published siblings. This also matches
+ *    what publishing does — append to the group — so the position shown is the
+ *    position the page will land in.
+ *  - **A draft is never a parent.** Its children could not be published until it was
+ *    published first, and a published page cannot be parented to one at all (server
+ *    validateParentExists). A draft whose own parent is another draft therefore
+ *    falls back to the root group rather than nesting or vanishing.
+ */
+export function buildPageTree(pages: Page[], drafts: Draft[] = []): PageNode[] {
+    const pageIds = new Set(pages.map((page) => page.id));
+
+    const pagesByParent = new Map<string, Page[]>();
     for (const page of pages) {
-        const parentId = ids.has(page.parent_id) ? page.parent_id : '';
-        const group = byParent.get(parentId);
-        if (group) {
-            group.push(page);
-        } else {
-            byParent.set(parentId, [page]);
+        group(pagesByParent, pageIds.has(page.parent_id) ? page.parent_id : '', page);
+    }
+
+    const draftsByParent = new Map<string, Draft[]>();
+    for (const draft of drafts) {
+        if (pageIds.has(draft.page_id)) {
+            continue;
         }
+        group(draftsByParent, pageIds.has(draft.parent_id) ? draft.parent_id : '', draft);
     }
 
-    const build = (parentId: string, depth: number): PageNode[] =>
-        (byParent.get(parentId) ?? []).
+    const build = (parentId: string, depth: number): PageNode[] => {
+        const published = (pagesByParent.get(parentId) ?? []).
             slice().
             sort(bySortOrder).
-            map((page) => ({page, children: build(page.id, depth + 1), depth}));
+            map((page): PageNode => ({
+                id: page.id,
+                title: page.title,
+                page,
+                children: build(page.id, depth + 1),
+                depth,
+            }));
+
+        const unpublished = (draftsByParent.get(parentId) ?? []).
+            slice().
+            sort(byCreateAt).
+            map((draft): PageNode => ({
+                id: draft.page_id,
+                title: draft.title,
+                draft,
+                children: [],
+                depth,
+            }));
+
+        return [...published, ...unpublished];
+    };
 
     return build('', 0);
 }
 
-// Maps each page id to the set of its descendant ids (excluding itself). Backs
-// the drag guard that forbids dropping a page into its own subtree.
+// How many of a sibling group are published — also the boundary the drafts sit
+// after. A page may not be reordered past it and a draft may not be reordered before
+// it, so every move has to land inside the published region.
+export const publishedCount = (siblings: PageNode[]): number =>
+    siblings.filter((node) => node.page).length;
+
+// Maps each row id to the set of its descendant ids (excluding itself). Backs the
+// drag guard that forbids dropping a page into its own subtree.
 export function buildDescendantMap(roots: PageNode[]): Map<string, Set<string>> {
     const map = new Map<string, Set<string>>();
 
     const collect = (node: PageNode): Set<string> => {
         const descendants = new Set<string>();
         for (const child of node.children) {
-            descendants.add(child.page.id);
+            descendants.add(child.id);
             for (const id of collect(child)) {
                 descendants.add(id);
             }
         }
-        map.set(node.page.id, descendants);
+        map.set(node.id, descendants);
         return descendants;
     };
 

From 99c5ee1f4f021f04b8e749888075b200781e91d1 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 21:19:24 -0500
Subject: [PATCH 62/68] feat(docs): make page tree rows links and give drafts a
 menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rows were divs with an onClick, so a page could not be opened in a new tab,
middle-clicked or copied — and a draft row was not clickable at all, because
nothing routed it to its draft address.

Each row is now an anchor to the address that fits what backs it: the page
path for a published page, the draft path for an unpublished one. Enter and
Space go through the same helper, so keyboard and pointer cannot disagree. The
link's ::after stretches over the row, which keeps the whole row clickable
while leaving the chevron and the menu as real buttons — they could not be
nested inside an anchor.

Draft rows keep the overflow menu with the subset that means anything for an
unpublished page: copy link, open in new window, and Discard. Discarding
destroys the only copy of the page, so it confirms first and, if you are
looking at it, returns you to the space.

Prompt: draft pages should still have the dotmenu in the page tree (with a
reduced options set); add a Discard entry; all items in the page tree need to
be proper <Link/>s
---
 webapp/i18n/en.json                           |  7 ++
 .../discard_draft_modal.tsx                   | 85 ++++++++++++++++++
 webapp/src/components/page_menu/page_menu.tsx | 66 +++++++++++++-
 .../page_tree/page_tree_node.module.scss      | 35 ++++++++
 .../space_view/page_tree/page_tree_node.tsx   | 90 +++++++++++--------
 .../page_tree/page_tree_panel.test.tsx        | 31 ++++++-
 .../space_view/page_tree/page_tree_panel.tsx  | 17 +++-
 7 files changed, 284 insertions(+), 47 deletions(-)
 create mode 100644 webapp/src/components/discard_draft_modal/discard_draft_modal.tsx

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 3df3389..0ee6689 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -28,6 +28,10 @@
   "docs.deletePage.error": "Could not delete “{title}”.",
   "docs.deletePage.message": "Are you sure you want to delete <b>{title}</b>? Its subpages will be deleted too.",
   "docs.deletePage.title": "Delete page",
+  "docs.discardDraft.confirm": "Discard",
+  "docs.discardDraft.error": "Could not discard “{title}”.",
+  "docs.discardDraft.message": "Are you sure you want to discard <b>{title}</b>? It has never been published, so this cannot be undone.",
+  "docs.discardDraft.title": "Discard draft",
   "docs.editor.header.draft": "Draft · {spaceId} / {pageId}",
   "docs.editor.header.published": "Published · {spaceId} / {pageId}",
   "docs.editor.hostMissing": "This Mattermost build does not publish the Docs editor. Update the server to edit pages here.",
@@ -75,6 +79,8 @@
   "docs.pageMenu.comingSoon": "Coming soon",
   "docs.pageMenu.copyLink": "Copy link",
   "docs.pageMenu.delete": "Delete page",
+  "docs.pageMenu.discard": "Discard draft",
+  "docs.pageMenu.draftLabel": "Draft options for {title}",
   "docs.pageMenu.duplicate": "Duplicate page",
   "docs.pageMenu.export": "Export",
   "docs.pageMenu.export.markdown": "Markdown",
@@ -87,6 +93,7 @@
   "docs.pageMenu.notifications.mentions": "Mentions",
   "docs.pageMenu.notifications.none": "Nothing",
   "docs.pageMenu.openInNewWindow": "Open in new window",
+  "docs.pageMenu.openNewWindow": "Open in new window",
   "docs.pageMenu.rename": "Rename",
   "docs.pageMenu.sharing": "Sharing and Permissions",
   "docs.pageMenu.unfavorite": "Remove from favorites",
diff --git a/webapp/src/components/discard_draft_modal/discard_draft_modal.tsx b/webapp/src/components/discard_draft_modal/discard_draft_modal.tsx
new file mode 100644
index 0000000..fdd9bb4
--- /dev/null
+++ b/webapp/src/components/discard_draft_modal/discard_draft_modal.tsx
@@ -0,0 +1,85 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useDocsNavigation} from 'hooks/navigation';
+import {useAppDispatch} from 'hooks/redux';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {discardDraft} from 'store/actions';
+
+import ConfirmModal from 'components/confirm_modal/confirm_modal';
+import {toast} from 'components/toast';
+
+type Props = {
+    spaceId: string;
+    pageId: string;
+    pageTitle: string;
+    onClose: () => void;
+};
+
+/**
+ * Confirms discarding an unpublished page.
+ *
+ * Worth a confirm even though nothing published is at risk: the draft *is* the
+ * page, so discarding it destroys the only copy. Viewing it at the time leaves
+ * nothing to show, so the viewer lands back in the space.
+ */
+const DiscardDraftModal = ({spaceId, pageId, pageTitle, onClose}: Props) => {
+    const dispatch = useAppDispatch();
+    const {pageId: routedPageId, isDraft, goToSpace} = useDocsNavigation();
+
+    const viewingThisDraft = isDraft && routedPageId === pageId;
+
+    const confirm = async () => {
+        try {
+            await dispatch(discardDraft(spaceId, pageId));
+            if (viewingThisDraft) {
+                // The draft URL names something that no longer exists, so it is not
+                // somewhere Back should return to.
+                goToSpace(spaceId, {replace: true});
+            }
+        } catch (error) {
+            toast.error(
+                <FormattedMessage
+                    id='docs.discardDraft.error'
+                    defaultMessage='Could not discard “{title}”.'
+                    values={{title: pageTitle}}
+                />,
+                {description: error instanceof Error ? error.message : String(error)},
+            );
+        }
+        onClose();
+    };
+
+    return (
+        <ConfirmModal
+            title={(
+                <FormattedMessage
+                    id='docs.discardDraft.title'
+                    defaultMessage='Discard draft'
+                />
+            )}
+            confirmButtonText={(
+                <FormattedMessage
+                    id='docs.discardDraft.confirm'
+                    defaultMessage='Discard'
+                />
+            )}
+            isConfirmDestructive={true}
+            onConfirm={confirm}
+            onCancel={onClose}
+        >
+            <FormattedMessage
+                id='docs.discardDraft.message'
+                defaultMessage='Are you sure you want to discard <b>{title}</b>? It has never been published, so this cannot be undone.'
+                values={{
+                    title: pageTitle,
+                    b: (chunks) => <b>{chunks}</b>,
+                }}
+            />
+        </ConfirmModal>
+    );
+};
+
+export default DiscardDraftModal;
diff --git a/webapp/src/components/page_menu/page_menu.tsx b/webapp/src/components/page_menu/page_menu.tsx
index 6985620..ebfa7f7 100644
--- a/webapp/src/components/page_menu/page_menu.tsx
+++ b/webapp/src/components/page_menu/page_menu.tsx
@@ -25,6 +25,7 @@ import {updatePage} from 'store/actions';
 
 import BasicInputModal from 'components/basic_input_modal/basic_input_modal';
 import DeletePageModal from 'components/delete_page_modal/delete_page_modal';
+import DiscardDraftModal from 'components/discard_draft_modal/discard_draft_modal';
 import Menu from 'components/menu/menu';
 import {openDocsModal} from 'components/modals';
 
@@ -36,6 +37,11 @@ type Props = {
     pageId: string;
     pageTitle: string;
 
+    // An unpublished page. Most page actions have no meaning for one — it cannot be
+    // favorited, shared, exported or version-tracked — so it gets a reduced set
+    // ending in Discard rather than Delete.
+    isDraft?: boolean;
+
     // Base UI merges its own open/aria/ref props onto the trigger element.
     trigger: React.ReactElement;
     align?: 'left' | 'right';
@@ -51,14 +57,14 @@ type Props = {
  * The page actions menu, shared by the page tree rows and the page header.
  * Items without a handler are scaffolding for features that have no API yet.
  */
-const PageMenu = ({spaceId, pageId, pageTitle, trigger, align = 'left', tooltip, open, onOpenChange}: Props) => {
+const PageMenu = ({spaceId, pageId, pageTitle, isDraft = false, trigger, align = 'left', tooltip, open, onOpenChange}: Props) => {
     const {formatMessage} = useIntl();
     const {paths} = useDocsNavigation();
     const dispatch = useAppDispatch();
     const favorited = useIsFavorite('page', pageId);
     const toggleFavorite = useToggleFavorite();
 
-    const pageUrl = `${window.location.origin}${paths.page(spaceId, pageId)}`;
+    const pageUrl = `${window.location.origin}${isDraft ? paths.draft(spaceId, pageId) : paths.page(spaceId, pageId)}`;
 
     const copyLink = useCallback(() => copyToClipboard(pageUrl), [pageUrl]);
     const openInNewWindow = useCallback(() => window.open(pageUrl, '_blank', 'noopener,noreferrer'), [pageUrl]);
@@ -90,6 +96,62 @@ const PageMenu = ({spaceId, pageId, pageTitle, trigger, align = 'left', tooltip,
         ));
     }, [pageId, pageTitle, spaceId]);
 
+    const openDiscardConfirm = useCallback(() => {
+        openDocsModal((modal) => (
+            <DiscardDraftModal
+                spaceId={spaceId}
+                pageId={pageId}
+                pageTitle={pageTitle}
+                onClose={modal.close}
+            />
+        ));
+    }, [pageId, pageTitle, spaceId]);
+
+    if (isDraft) {
+        return (
+            <Menu
+                ariaLabel={formatMessage({id: 'docs.pageMenu.draftLabel', defaultMessage: 'Draft options for {title}'}, {title: pageTitle})}
+                align={align}
+                tooltip={tooltip}
+                trigger={trigger}
+                open={open}
+                onOpenChange={onOpenChange}
+            >
+                <Menu.Item
+                    leadingIcon={<LinkVariantIcon size={18}/>}
+                    onClick={copyLink}
+                >
+                    <FormattedMessage
+                        id='docs.pageMenu.copyLink'
+                        defaultMessage='Copy link'
+                    />
+                </Menu.Item>
+                <Menu.Item
+                    leadingIcon={<DockWindowIcon size={18}/>}
+                    onClick={openInNewWindow}
+                >
+                    <FormattedMessage
+                        id='docs.pageMenu.openNewWindow'
+                        defaultMessage='Open in new window'
+                    />
+                </Menu.Item>
+
+                <Menu.Separator/>
+
+                <Menu.Item
+                    destructive={true}
+                    leadingIcon={<TrashCanOutlineIcon size={18}/>}
+                    onClick={openDiscardConfirm}
+                >
+                    <FormattedMessage
+                        id='docs.pageMenu.discard'
+                        defaultMessage='Discard draft'
+                    />
+                </Menu.Item>
+            </Menu>
+        );
+    }
+
     return (
         <Menu
             ariaLabel={formatMessage({id: 'docs.pageMenu.label', defaultMessage: 'Page options for {title}'}, {title: pageTitle})}
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
index 6ec1ba9..f04bdae 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
@@ -30,6 +30,41 @@
     opacity: 1;
 }
 
+// The row's link. It holds the icon and title inline, and its ::after stretches
+// the hit area across the whole row — so the row stays clickable end to end while
+// the chevron and menu stay real buttons, which they could not be nested inside an
+// anchor. Those sit above the stretched area on their own stacking context.
+.rowLink {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: 4px;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &::after {
+        position: absolute;
+        border-radius: 4px;
+        content: '';
+        inset: 0;
+    }
+}
+
+.chevron,
+.menuTrigger,
+.favorite,
+.draftBadge {
+    position: relative;
+    z-index: 1;
+}
+
 // The whole row is the click target, so it owns the only hover/selected state
 // in the tree; the chevron inside only tints itself. Nesting is applied as a
 // left margin (not padding) so the hitbox and its hover/selected background
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index 0ce388b..3fa7f65 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -8,6 +8,7 @@ import {useTextOverflow} from 'hooks/text_overflow';
 import React, {useState} from 'react';
 import {createPortal} from 'react-dom';
 import {FormattedMessage, useIntl} from 'react-intl';
+import {Link} from 'react-router-dom';
 
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
 import ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';
@@ -41,7 +42,10 @@ type Props = {
 
     // The one row in the whole tree that is tabbable (roving tabindex).
     tabStopId?: string;
-    onSelect: (pageId: string) => void;
+
+    // Where this row points. Rows are real links so a page can be opened in a new
+    // tab, copied, or middle-clicked like any other address in the product.
+    hrefFor: (node: PageNode) => string;
     onToggle: (pageId: string) => void;
     onSetCollapsed: (ids: string[], collapsed: boolean) => void;
     onFocusRow: (pageId: string) => void;
@@ -49,7 +53,7 @@ type Props = {
     registerRow: (pageId: string, element: HTMLElement | null) => void;
 };
 
-const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeights, draggingId, dndEnabled, tabStopId, onSelect, onToggle, onSetCollapsed, onFocusRow, onRowKeyDown, registerRow}: Props) => {
+const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeights, draggingId, dndEnabled, tabStopId, hrefFor, onToggle, onSetCollapsed, onFocusRow, onRowKeyDown, registerRow}: Props) => {
     const {formatMessage} = useIntl();
     const [element, setElement] = useState<HTMLDivElement | null>(null);
     const [menuOpen, setMenuOpen] = useState(false);
@@ -58,6 +62,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
     // Narrow subscription: only this page's own favorite state re-renders the row.
     const favorited = useIsFavorite('page', node.id);
     const {id, page, draft, children, depth} = node;
+    const spaceId = page?.space_id ?? draft?.space_id ?? '';
     const hasChildren = children.length > 0;
     const isCollapsed = collapsed.has(id);
 
@@ -112,12 +117,14 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
         onSetCollapsed(ids, !isCollapsed);
     };
 
-    const onRowClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    // A plain click is left to the link, so modifier-clicks keep their browser
+    // meaning (new tab, new window, download). Only the shift-click shortcut is
+    // intercepted, since shift on a link means "open in a new window".
+    const onLinkClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
         if (event.shiftKey && hasChildren) {
+            event.preventDefault();
             toggleRecursive();
-            return;
         }
-        onSelect(id);
     };
 
     const onChevronClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -167,7 +174,7 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
             draggingId={draggingId}
             dndEnabled={dndEnabled}
             tabStopId={tabStopId}
-            onSelect={onSelect}
+            hrefFor={hrefFor}
             onToggle={onToggle}
             onSetCollapsed={onSetCollapsed}
             onFocusRow={onFocusRow}
@@ -233,7 +240,6 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                         [styles.invalidZone]: inDraggedSubtree,
                     })}
                     style={{marginInlineStart: depth * INDENT_STEP}}
-                    onClick={onRowClick}
                 >
                     {hasChildren ? (
                         <button
@@ -252,13 +258,27 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                             aria-hidden={true}
                         />
                     )}
-                    <span
-                        className={styles.icon}
-                        aria-hidden={true}
+                    <Link
+                        className={styles.rowLink}
+                        to={hrefFor(node)}
+
+                        // The row itself is the drag handle; a link's native drag
+                        // would start a URL drag and pre-empt it.
+                        draggable={false}
+
+                        // The treeitem is the tab stop, so the link stays out of the
+                        // tab order and Enter is handled by the row.
+                        tabIndex={-1}
+                        onClick={onLinkClick}
                     >
-                        <PageGlyph size={16}/>
-                    </span>
-                    {title}
+                        <span
+                            className={styles.icon}
+                            aria-hidden={true}
+                        >
+                            <PageGlyph size={16}/>
+                        </span>
+                        {title}
+                    </Link>
                     {draft && (
                         <span className={styles.draftBadge}>
                             <FormattedMessage
@@ -278,30 +298,26 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                     )}
                     <Spacer/>
 
-                    {/* Every entry in the page menu — rename, favorite, copy link,
-                        delete — acts on a published page. An unpublished one is
-                        managed from the page itself, where Publish and Discard are. */}
-                    {page && (
-                        <PageMenu
-                            spaceId={page.space_id}
-                            pageId={id}
-                            pageTitle={node.title}
-                            align='right'
-                            open={menuOpen}
-                            onOpenChange={setMenuOpen}
-                            trigger={(
-                                <button
-                                    type='button'
-                                    className={styles.menuTrigger}
-                                    tabIndex={-1}
-                                    aria-label={menuLabel}
-                                    onClick={(event) => event.stopPropagation()}
-                                >
-                                    <DotsHorizontalIcon size={16}/>
-                                </button>
-                            )}
-                        />
-                    )}
+                    <PageMenu
+                        spaceId={spaceId}
+                        pageId={id}
+                        pageTitle={node.title}
+                        isDraft={!page}
+                        align='right'
+                        open={menuOpen}
+                        onOpenChange={setMenuOpen}
+                        trigger={(
+                            <button
+                                type='button'
+                                className={styles.menuTrigger}
+                                tabIndex={-1}
+                                aria-label={menuLabel}
+                                onClick={(event) => event.stopPropagation()}
+                            >
+                                <DotsHorizontalIcon size={16}/>
+                            </button>
+                        )}
+                    />
                 </div>
                 {/* Indented to the destination's level: the line spans the hit
                     wrapper, which is full width, but the page would land as this
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx
index dfa29b9..0a0a334 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.test.tsx
@@ -4,12 +4,13 @@
 import {fireEvent, screen, waitFor} from '@testing-library/react';
 import React from 'react';
 
-import {makePage, makeSpace} from 'store/test_fixtures';
+import {makeDraft, makePage, makeSpace} from 'store/test_fixtures';
 
 import {getReadoutMessage} from 'components/readout';
 import {toast} from 'components/toast';
 
 import type {Page} from 'types/docs';
+import type {Draft} from 'types/drafts';
 
 import PageTreePanel from './page_tree_panel';
 
@@ -26,6 +27,7 @@ jest.mock('hooks/navigation', () => ({
         paths: {
             overview: (spaceId: string) => `/docs/${spaceId}/overview`,
             page: (spaceId: string, pageId: string) => `/docs/${spaceId}/${pageId}`,
+            draft: (spaceId: string, pageId: string) => `/docs/${spaceId}/drafts/${pageId}`,
         },
     }),
 }));
@@ -67,12 +69,14 @@ const PAGES: Page[] = [
     makePage('b', SPACE.id, 'b', 1),
 ];
 
-const renderPanel = () => renderWithContext(<PageTreePanel space={SPACE}/>, {
+const renderPanel = ({drafts = []}: {drafts?: Draft[]} = {}) => renderWithContext(<PageTreePanel space={SPACE}/>, {
     state: {
         docs: {
             spaces: {[SPACE.id]: SPACE},
             pages: Object.fromEntries(PAGES.map((page) => [page.id, page])),
             pagesInSpace: {[SPACE.id]: new Set(PAGES.map((page) => page.id))},
+            drafts: Object.fromEntries(drafts.map((draft) => [draft.page_id, draft])),
+            draftsInSpace: {[SPACE.id]: new Set(drafts.map((draft) => draft.page_id))},
         },
     },
 });
@@ -81,6 +85,25 @@ const renderPanel = () => renderWithContext(<PageTreePanel space={SPACE}/>, {
 // by their title text and walked up to the treeitem.
 const row = (title: string) => screen.getByText(title).closest('[role="treeitem"]') as HTMLElement;
 
+// Rows are anchors so a page can be opened in a new tab, copied, or middle-clicked
+// like any other address; a div with an onClick supports none of that.
+describe('PageTreePanel row links', () => {
+    it('renders each row as a link to its page', () => {
+        renderPanel();
+
+        expect(screen.getByText('a1').closest('a')).toHaveAttribute('href', `/docs/${SPACE.id}/a1`);
+    });
+
+    // A draft has no published page, so a page address would 404 into the overview
+    // redirect — which is what made draft rows look unclickable.
+    it('links a draft row to its draft address', () => {
+        renderPanel({drafts: [makeDraft('d1', SPACE.id, 'Unpublished')]});
+
+        expect(screen.getByText('Unpublished').closest('a')).
+            toHaveAttribute('href', `/docs/${SPACE.id}/drafts/d1`);
+    });
+});
+
 describe('PageTreePanel keyboard support', () => {
     beforeEach(() => {
         jest.clearAllMocks();
@@ -136,10 +159,10 @@ describe('PageTreePanel keyboard support', () => {
     });
 
     it('opens the routed page on Enter', () => {
-        renderPanel();
+        const {history} = renderPanel();
 
         fireEvent.keyDown(row('a1'), {key: 'Enter'});
-        expect(mockGoToPage).toHaveBeenCalledWith(SPACE.id, 'a1');
+        expect(history.location.pathname).toBe(`/docs/${SPACE.id}/a1`);
     });
 
     it('reorders with Alt+arrow and announces the new position', () => {
diff --git a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
index 35a760e..c1d0459 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_panel.tsx
@@ -7,6 +7,7 @@ import {useCreateRootPage} from 'hooks/pages';
 import {useAppDispatch, useAppSelector} from 'hooks/redux';
 import React, {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
+import {useHistory} from 'react-router-dom';
 
 import PlusIcon from '@mattermost/compass-icons/components/plus';
 
@@ -42,7 +43,8 @@ const REORDER_KEYS: Record<string, ReorderIntent> = {
 const PageTreePanel = ({space}: {space: Space}) => {
     const dispatch = useAppDispatch();
     const {formatMessage} = useIntl();
-    const {goToPage, pageId} = useDocsNavigation();
+    const {pageId, paths} = useDocsNavigation();
+    const history = useHistory();
     const {collapsed, toggle, setCollapsedFor} = useCollapsedPages();
     const createRootPage = useCreateRootPage(space.id);
 
@@ -56,6 +58,13 @@ const PageTreePanel = ({space}: {space: Space}) => {
     const subtreeHeights = useMemo(() => buildSubtreeHeightMap(roots), [roots]);
     const visibleRows = useMemo(() => flattenVisibleRows(roots, collapsed), [roots, collapsed]);
 
+    // A draft has no published page, so it is addressed as a draft. One helper for
+    // the row links and for the keyboard, so the two can never disagree.
+    const hrefFor = useCallback(
+        (node: PageNode) => (node.page ? paths.page(space.id, node.id) : paths.draft(space.id, node.id)),
+        [paths, space.id],
+    );
+
     // Published rows first, drafts after; split so the root append strip lands
     // between them rather than below the drafts (see the render).
     const publishedRoots = roots.filter((node) => node.page);
@@ -235,14 +244,14 @@ const PageTreePanel = ({space}: {space: Space}) => {
             break;
         case 'Enter':
         case ' ':
-            goToPage(space.id, rowId);
+            history.push(hrefFor(node));
             break;
         default:
             return;
         }
 
         event.preventDefault();
-    }, [visibleRows, collapsed, reorder, focusRow, toggle, goToPage, space.id]);
+    }, [visibleRows, collapsed, reorder, focusRow, toggle, history, hrefFor]);
 
     // The row that owns the tab stop: wherever focus last was, else the routed
     // page, else the first row — so Tab always lands somewhere sensible.
@@ -268,7 +277,7 @@ const PageTreePanel = ({space}: {space: Space}) => {
             draggingId={draggingId}
             dndEnabled={true}
             tabStopId={tabStopId}
-            onSelect={(id) => goToPage(space.id, id)}
+            hrefFor={hrefFor}
             onToggle={toggle}
             onSetCollapsed={setCollapsedFor}
             onFocusRow={onFocusRow}

From af3592a1737f0dbb7f97326291770628ee30ba58 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 21:23:47 -0500
Subject: [PATCH 63/68] feat(docs): give drafts view/edit modes and a publish
 control
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A draft now reads the same ?edit=1 as a published page: an unpublished page
still has a rendered form worth reading before deciding to publish it. The
query rides on whichever address is current, so toggling never moves between
the page and draft routes.

Header controls, in edit mode: Publish or Update first, Close beside it. Done
is renamed Close, since it leaves the mode rather than completing anything —
title edits are already saved by then.

Publish and Update are the same act on either side of publication: with no
published page the draft is the page, and with one it is unpublished edits to
it. Update is therefore disabled until there are edits to apply, saying so
rather than failing when pressed. It only becomes reachable once the autosave
editor lands; the plumbing is in place for it.

The routed page's draft is now loaded for every page, not just the draft
route, since a published page can have one too.

Prompt: draft pages should support the same edit/view modes as pages, with the
added option of publishing. Done should instead be Close. Drafts should also
have Publish. Published pages should have an Update button. Close on the
right, Publish/Update on the left
---
 webapp/i18n/en.json                           |   4 +-
 .../space_view/page_header.test.tsx           |  53 +++++++-
 .../src/components/space_view/page_header.tsx | 127 ++++++++++++------
 .../src/components/space_view/space_view.tsx  |   9 +-
 webapp/src/hooks/navigation.ts                |  28 ++--
 5 files changed, 153 insertions(+), 68 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 0ee6689..0bf6622 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -159,10 +159,10 @@
   "docs.sidebar.team.members": "Manage members",
   "docs.sidebar.team.menu": "Manage {teamName}",
   "docs.sidebar.team.settings": "Team settings",
+  "docs.space.close": "Close",
   "docs.space.comments": "Comments",
   "docs.space.descriptionPlaceholder": "Add a space description here — just a brief summary of the purpose for this space.",
   "docs.space.details": "Space details",
-  "docs.space.done": "Done",
   "docs.space.edit": "Edit",
   "docs.space.expand": "Expand",
   "docs.space.favorite": "Favorite this space",
@@ -178,6 +178,7 @@
   "docs.space.menu.members": "Members",
   "docs.space.menu.settings": "Space settings",
   "docs.space.more": "More actions",
+  "docs.space.noUnpublishedChanges": "No unpublished changes",
   "docs.space.pages": "Pages",
   "docs.space.publish": "Publish",
   "docs.space.share": "Share",
@@ -185,6 +186,7 @@
   "docs.space.stat.pages": "Pages",
   "docs.space.stat.views": "Views",
   "docs.space.unfavorite": "Remove from favorites",
+  "docs.space.update": "Update",
   "docs.space.updated": "Updated {relative}",
   "docs.spaceInfo.back": "Back to space info",
   "docs.spaceInfo.close": "Close info",
diff --git a/webapp/src/components/space_view/page_header.test.tsx b/webapp/src/components/space_view/page_header.test.tsx
index 0f3b242..3966d34 100644
--- a/webapp/src/components/space_view/page_header.test.tsx
+++ b/webapp/src/components/space_view/page_header.test.tsx
@@ -4,7 +4,7 @@
 import {fireEvent, screen} from '@testing-library/react';
 import React from 'react';
 
-import {makePage, makeSpace} from 'store/test_fixtures';
+import {makeDraft, makePage, makeSpace} from 'store/test_fixtures';
 
 import PageHeader from './page_header';
 
@@ -42,13 +42,13 @@ describe('PageHeader edit control', () => {
         renderHeader();
 
         expect(screen.getByRole('button', {name: 'Edit'})).toBeInTheDocument();
-        expect(screen.queryByRole('button', {name: 'Done'})).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Close'})).not.toBeInTheDocument();
     });
 
-    it('offers Done while editing', () => {
+    it('offers Close while editing', () => {
         renderHeader({editing: true});
 
-        expect(screen.getByRole('button', {name: 'Done'})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Close'})).toBeInTheDocument();
         expect(screen.queryByRole('button', {name: 'Edit'})).not.toBeInTheDocument();
     });
 
@@ -63,7 +63,7 @@ describe('PageHeader edit control', () => {
     it('reports the pressed mode while editing', () => {
         renderHeader({editing: true});
 
-        expect(screen.getByRole('button', {name: 'Done'})).toHaveAttribute('aria-pressed', 'true');
+        expect(screen.getByRole('button', {name: 'Close'})).toHaveAttribute('aria-pressed', 'true');
     });
 
     it('reports a click on the control', () => {
@@ -81,3 +81,46 @@ describe('PageHeader edit control', () => {
         expect(screen.queryByRole('button', {name: 'Edit'})).not.toBeInTheDocument();
     });
 });
+
+describe('PageHeader publish controls', () => {
+    const DRAFT = makeDraft('runbook', 'eng', 'Runbook');
+
+    // With no published page the draft *is* the page, so committing it creates one.
+    it('offers Publish while editing an unpublished page', () => {
+        renderHeader({page: undefined, draft: DRAFT, editing: true});
+
+        expect(screen.getByRole('button', {name: 'Publish'})).toBeEnabled();
+        expect(screen.queryByRole('button', {name: 'Update'})).not.toBeInTheDocument();
+    });
+
+    // Alongside a published page the same draft means unpublished edits to it.
+    it('offers Update while editing a page that has unpublished edits', () => {
+        renderHeader({draft: DRAFT, editing: true});
+
+        expect(screen.getByRole('button', {name: 'Update'})).toBeEnabled();
+        expect(screen.queryByRole('button', {name: 'Publish'})).not.toBeInTheDocument();
+    });
+
+    // Nothing to apply, so the control says so rather than failing when pressed.
+    it('disables Update when the page has no unpublished edits', () => {
+        renderHeader({editing: true});
+
+        expect(screen.getByRole('button', {name: 'Update'})).toBeDisabled();
+    });
+
+    it('shows neither while reading', () => {
+        renderHeader({draft: DRAFT});
+
+        expect(screen.queryByRole('button', {name: 'Update'})).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Publish'})).not.toBeInTheDocument();
+    });
+
+    it('publishes on click', () => {
+        const onPublish = jest.fn();
+        renderHeader({page: undefined, draft: DRAFT, editing: true, onPublish});
+
+        fireEvent.click(screen.getByRole('button', {name: 'Publish'}));
+
+        expect(onPublish).toHaveBeenCalled();
+    });
+});
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 9a74d22..2aec5a6 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -59,9 +59,9 @@ type Props = {
     // last-updated time shows.
     page?: Page;
 
-    // The routed draft, for a page that isn't published yet. Swaps the page-scoped
-    // controls for Publish: there is no published version to comment on, share, or
-    // toggle back to reading.
+    // The routed page's draft, if it has one. With no `page` it is an unpublished
+    // page and Publish creates it; alongside a `page` it is unpublished edits and
+    // Update applies them.
     draft?: Draft;
     treeOpen: boolean;
     editing: boolean;
@@ -70,8 +70,9 @@ type Props = {
     onPublish: () => void;
 };
 
-// Page controls (comments, edit, overflow, expand) are visual scaffolding wired
-// in later passes; the pages toggle drives the page tree panel.
+// Comments, overflow and expand are visual scaffolding wired in later passes; the
+// pages toggle drives the page tree panel, and Edit/Close plus Publish/Update are
+// live.
 const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onToggleEdit, onPublish}: Props) => {
     const {formatMessage} = useIntl();
     const createRootPage = useCreateRootPage(space.id);
@@ -96,6 +97,18 @@ const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onTog
     const commentsLabel = formatMessage({id: 'docs.space.comments', defaultMessage: 'Comments'});
     const moreLabel = formatMessage({id: 'docs.space.more', defaultMessage: 'More actions'});
     const expandLabel = formatMessage({id: 'docs.space.expand', defaultMessage: 'Expand'});
+    const updateLabel = formatMessage({id: 'docs.space.update', defaultMessage: 'Update'});
+    const noChangesLabel = formatMessage({id: 'docs.space.noUnpublishedChanges', defaultMessage: 'No unpublished changes'});
+
+    // What the page-scoped controls act on: the published page, or the unpublished
+    // one when there is no published version yet.
+    const subject = page ?? (draft && {id: draft.page_id, title: draft.title});
+
+    // Two different states share one draft: with no published page it *is* the page
+    // (Publish creates it); with one, it is unpublished edits to it (Update applies
+    // them).
+    const unpublished = !page && Boolean(draft);
+    const hasUnpublishedEdits = Boolean(page) && Boolean(draft);
 
     // The open page's last-updated time, the draft's own while it is unpublished,
     // otherwise the space's.
@@ -159,7 +172,20 @@ const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onTog
                         values={{relative: updatedRelative}}
                     />
                 </span>
-                {draft && (
+                {page && (
+                    <Button
+                        emphasis='quaternary'
+                        size='sm'
+                        className='btn-icon'
+                        badge={true}
+                        tooltip={commentsLabel}
+                        leadingIcon={<MessageTextOutlineIcon size={18}/>}
+                    />
+                )}
+
+                {/* Publish/Update sits before Close: the action that commits the
+                    work reads first, and leaving is the fallback beside it. */}
+                {editing && subject && (unpublished ? (
                     <Button
                         emphasis='primary'
                         size='sm'
@@ -171,45 +197,64 @@ const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onTog
                             defaultMessage='Publish'
                         />
                     </Button>
+                ) : (
+                    <Button
+                        emphasis='primary'
+                        size='sm'
+
+                        // Update publishes the edits held as a draft against this
+                        // page. With none there is nothing to apply, so the control
+                        // says why rather than failing when pressed.
+                        disabled={publishing || !hasUnpublishedEdits}
+
+                        // Explicit, because `tooltip` otherwise becomes the
+                        // accessible name — and the control is still "Update"
+                        // whatever the reason it is unavailable.
+                        aria-label={updateLabel}
+                        tooltip={hasUnpublishedEdits ? undefined : noChangesLabel}
+                        onClick={publish}
+                    >
+                        <FormattedMessage
+                            id='docs.space.update'
+                            defaultMessage='Update'
+                        />
+                    </Button>
+                ))}
+
+                {subject && (
+                    <Button
+                        emphasis='quaternary'
+                        size='sm'
+                        className={classNames('docs-btn-neutral', styles.iconLabel)}
+                        leadingIcon={editing ? <CheckIcon size={18}/> : <PencilOutlineIcon size={18}/>}
+
+                        // The control is a mode toggle, and a changed label on a
+                        // button that already holds focus is not reliably
+                        // re-announced.
+                        aria-pressed={editing}
+                        onClick={onToggleEdit}
+                    >
+                        {editing ? (
+                            <FormattedMessage
+                                id='docs.space.close'
+                                defaultMessage='Close'
+                            />
+                        ) : (
+                            <FormattedMessage
+                                id='docs.space.edit'
+                                defaultMessage='Edit'
+                            />
+                        )}
+                    </Button>
                 )}
-                {page && (
+
+                {subject && (
                     <>
-                        <Button
-                            emphasis='quaternary'
-                            size='sm'
-                            className='btn-icon'
-                            badge={true}
-                            tooltip={commentsLabel}
-                            leadingIcon={<MessageTextOutlineIcon size={18}/>}
-                        />
-                        <Button
-                            emphasis='quaternary'
-                            size='sm'
-                            className={classNames('docs-btn-neutral', styles.iconLabel)}
-                            leadingIcon={editing ? <CheckIcon size={18}/> : <PencilOutlineIcon size={18}/>}
-
-                            // The control is a mode toggle, and a changed label on a
-                            // button that already holds focus is not reliably
-                            // re-announced.
-                            aria-pressed={editing}
-                            onClick={onToggleEdit}
-                        >
-                            {editing ? (
-                                <FormattedMessage
-                                    id='docs.space.done'
-                                    defaultMessage='Done'
-                                />
-                            ) : (
-                                <FormattedMessage
-                                    id='docs.space.edit'
-                                    defaultMessage='Edit'
-                                />
-                            )}
-                        </Button>
                         <PageMenu
                             spaceId={space.id}
-                            pageId={page.id}
-                            pageTitle={page.title}
+                            pageId={subject.id}
+                            pageTitle={subject.title}
+                            isDraft={unpublished}
                             align='right'
                             tooltip={moreLabel}
                             trigger={(
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index 0954e3c..5e7624e 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -38,12 +38,9 @@ const SpaceView = ({space}: {space: Space}) => {
     const page = useAppSelector((state) => (pageId ? getPageInSpace(state, space.id, pageId) : undefined));
     const pagesLoaded = useAppSelector((state) => arePagesLoadedForSpace(state, space.id));
 
-    // Only the draft route loads a draft. Unpublished edits to a published page are
-    // the editor's concern; this view renders the page for those.
-    const {draft, loaded: draftLoaded} = usePageDraft(
-        isDraft ? space.id : undefined,
-        isDraft ? pageId : undefined,
-    );
+    // Loaded for any routed page, not just the draft route: a published page can
+    // have unpublished edits too, and that is what Update acts on.
+    const {draft, loaded: draftLoaded} = usePageDraft(space.id, pageId);
     const publish = usePublishDraft(space.id);
     const onPublish = useCallback(() => (pageId ? publish(pageId) : undefined), [publish, pageId]);
     const {pageCount, memberCount} = useSpaceStats(space.id);
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index 071aac9..4da2699 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -36,11 +36,9 @@ export function useDocsNavigation() {
 
     // Only a routed page can be edited, so the query alone doesn't mean edit mode:
     // ?edit=1 on a space or overview URL names nothing to edit and is ignored.
-    //
-    // A draft is unpublished work with no published version to read, so its route is
-    // always editing and carries no query — there is no reading mode to toggle to.
-    const isEditing = isDraft ||
-        (Boolean(pageId) && !isOverview && new URLSearchParams(search).get(EDIT_QUERY) === '1');
+    // Drafts read the same query as published pages — an unpublished page still has
+    // a rendered form worth reading before deciding to publish it.
+    const isEditing = Boolean(pageId) && !isOverview && new URLSearchParams(search).get(EDIT_QUERY) === '1';
 
     // `replace` for arrivals that follow the routed page ceasing to exist: the URL
     // being left is dead, so it shouldn't be somewhere Back can return to.
@@ -104,21 +102,21 @@ export function useDocsNavigation() {
 
 /**
  * Returns a handler that moves the routed page in and out of edit mode: into
- * `?edit=1` while reading, back to the bare page path while editing. Both are
- * pushes, so Back is an exit. A no-op when no page is routed, since there is
- * nothing to edit.
+ * `?edit=1` while reading, back to the bare path while editing. Both are pushes, so
+ * Back is an exit. A no-op when no page is routed, since there is nothing to edit.
+ *
+ * Works for a draft as well as a published page — the query rides on whichever
+ * address is current, so toggling never moves between the two.
  */
 export function useTogglePageEditMode(spaceId: string) {
-    const {pageId, isEditing, goToPage, goToEditPage} = useDocsNavigation();
+    const history = useHistory();
+    const {pageId, isDraft, isEditing, paths} = useDocsNavigation();
 
     return useCallback(() => {
         if (!pageId) {
             return;
         }
-        if (isEditing) {
-            goToPage(spaceId, pageId);
-        } else {
-            goToEditPage(spaceId, pageId);
-        }
-    }, [isEditing, pageId, spaceId, goToPage, goToEditPage]);
+        const base = isDraft ? paths.draft(spaceId, pageId) : paths.page(spaceId, pageId);
+        history.push(isEditing ? base : `${base}?${EDIT_QUERY}=1`);
+    }, [history, isDraft, isEditing, pageId, spaceId, paths]);
 }

From cc12d79f4dcb1e1529ba03d038ce1eb453560c27 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Aug 2026 21:27:27 -0500
Subject: [PATCH 64/68] feat(docs): make spaces sidebar rows links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Space rows and Home were buttons calling history.push, so neither could be
opened in a new tab, copied, or middle-clicked. SidebarItem now renders an
anchor when given a destination and stays a button for rows that act rather
than navigate.

Space rows opt out of the browser's own link drag, which would otherwise
pre-empt drag-to-reorder.

The nav's active state is derived from the routed space id rather than held in
component state, so a back/forward navigation can't leave it out of sync — it
was tracked separately only because the click handler set it.

Prompt: Similarly to page tree items (that they need to be <Link/>s) -- Space
sidebar items also should be proper <Link/>s
---
 .../spaces_sidebar/sidebar_item.test.tsx      | 31 +++++++++
 .../spaces_sidebar/sidebar_item.tsx           | 64 ++++++++++++++-----
 .../components/spaces_sidebar/space_item.tsx  |  9 ++-
 .../spaces_sidebar/spaces_sidebar.tsx         | 21 +++---
 .../spaces_sidebar_nav.test.tsx               | 14 ++--
 .../spaces_sidebar/spaces_sidebar_nav.tsx     |  6 +-
 6 files changed, 103 insertions(+), 42 deletions(-)

diff --git a/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx b/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx
index c4c7c8a..f8d4723 100644
--- a/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx
+++ b/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx
@@ -6,6 +6,8 @@ import React from 'react';
 
 import SidebarItem from './sidebar_item';
 
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
 describe('SidebarItem', () => {
     it('renders leading, label, and trailing content', () => {
         render(
@@ -50,3 +52,32 @@ describe('SidebarItem', () => {
         expect(container.firstChild).toHaveClass('active');
     });
 });
+
+// Rows that navigate are anchors, so they support new-tab, copy and middle-click;
+// rows that act (a toggle, a menu) stay buttons.
+describe('SidebarItem as a link', () => {
+    it('renders an anchor when given a destination', () => {
+        renderWithContext(
+            <SidebarItem
+                leading={null}
+                label='Engineering'
+                to='/myteam/spaces/eng'
+            />,
+        );
+
+        expect(screen.getByRole('link', {name: 'Engineering'})).toHaveAttribute('href', '/myteam/spaces/eng');
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('stays a button without one', () => {
+        renderWithContext(
+            <SidebarItem
+                leading={null}
+                label='Engineering'
+                onClick={jest.fn()}
+            />,
+        );
+
+        expect(screen.getByRole('button', {name: 'Engineering'})).toBeInTheDocument();
+    });
+});
diff --git a/webapp/src/components/spaces_sidebar/sidebar_item.tsx b/webapp/src/components/spaces_sidebar/sidebar_item.tsx
index 984b5de..669ed93 100644
--- a/webapp/src/components/spaces_sidebar/sidebar_item.tsx
+++ b/webapp/src/components/spaces_sidebar/sidebar_item.tsx
@@ -3,6 +3,7 @@
 
 import classNames from 'classnames';
 import React from 'react';
+import {Link} from 'react-router-dom';
 
 import styles from './sidebar_item.module.scss';
 
@@ -14,31 +15,60 @@ type Props = {
     title?: string;
     trailing?: React.ReactNode;
     revealTrailingOnHover?: boolean;
+
+    // Where the row goes. A row that navigates is an anchor, so it can be opened in
+    // a new tab, copied or middle-clicked like any other address. `onClick` is for
+    // rows that act rather than navigate.
+    to?: string;
     onClick?: () => void;
+
+    // Rows that are drag sources have to opt out of the browser's own link drag,
+    // which would otherwise pre-empt the drag-and-drop.
+    draggable?: boolean;
 };
 
-const SidebarItem = ({leading, label, active = false, muted = true, title, trailing, revealTrailingOnHover = false, onClick}: Props) => (
-    <div className={classNames(styles.root, {[styles.active]: active})}>
-        {active && <span className={styles.activeBar}/>}
-        <button
-            type='button'
-            className={styles.button}
-            title={title}
-            onClick={onClick}
-        >
+const SidebarItem = ({leading, label, active = false, muted = true, title, trailing, revealTrailingOnHover = false, to, onClick, draggable}: Props) => {
+    const content = (
+        <>
             <span className={styles.icon}>{leading}</span>
             <span className={styles.content}>
                 <span className={classNames(styles.label, {[styles.bright]: active || !muted})}>
                     {label}
                 </span>
             </span>
-        </button>
-        {trailing && (
-            <span className={classNames(styles.trailing, {[styles.reveal]: revealTrailingOnHover})}>
-                {trailing}
-            </span>
-        )}
-    </div>
-);
+        </>
+    );
+
+    return (
+        <div className={classNames(styles.root, {[styles.active]: active})}>
+            {active && <span className={styles.activeBar}/>}
+            {to ? (
+                <Link
+                    className={styles.button}
+                    to={to}
+                    title={title}
+                    draggable={draggable}
+                    onClick={onClick}
+                >
+                    {content}
+                </Link>
+            ) : (
+                <button
+                    type='button'
+                    className={styles.button}
+                    title={title}
+                    onClick={onClick}
+                >
+                    {content}
+                </button>
+            )}
+            {trailing && (
+                <span className={classNames(styles.trailing, {[styles.reveal]: revealTrailingOnHover})}>
+                    {trailing}
+                </span>
+            )}
+        </div>
+    );
+};
 
 export default SidebarItem;
diff --git a/webapp/src/components/spaces_sidebar/space_item.tsx b/webapp/src/components/spaces_sidebar/space_item.tsx
index 98c6dc9..db2ddfd 100644
--- a/webapp/src/components/spaces_sidebar/space_item.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item.tsx
@@ -21,10 +21,10 @@ type Props = {
 
     // Gates drag-to-reorder until sidebar ordering persists (see SpacesSidebar).
     dndEnabled: boolean;
-    onSelect: (id: string) => void;
+    href: string;
 };
 
-const SpaceItem = ({space, category, active, dndEnabled, onSelect}: Props) => {
+const SpaceItem = ({space, category, active, dndEnabled, href}: Props) => {
     const [element, setElement] = useState<HTMLDivElement | null>(null);
     const {dragging, closestEdge} = useSpaceDragDrop({spaceId: space.id, category, element, enabled: dndEnabled});
 
@@ -54,7 +54,10 @@ const SpaceItem = ({space, category, active, dndEnabled, onSelect}: Props) => {
                     <SpaceItemMenu space={space}/>
                 )}
                 revealTrailingOnHover={true}
-                onClick={() => onSelect(space.id)}
+                to={href}
+
+                // The row is a drag source; a link's native drag would pre-empt it.
+                draggable={false}
             />
             {closestEdge && (
                 <DropIndicator
diff --git a/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx b/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx
index 52b31f1..9012787 100644
--- a/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx
+++ b/webapp/src/components/spaces_sidebar/spaces_sidebar.tsx
@@ -3,7 +3,7 @@
 
 import {useDocsNavigation} from 'hooks/navigation';
 import {useTeamContext} from 'hooks/team';
-import React, {useState} from 'react';
+import React from 'react';
 import {useIntl} from 'react-intl';
 
 import CreateSpaceButton from './create_space_button';
@@ -13,7 +13,7 @@ import SpaceItem from './space_item';
 import SpacesCategory from './spaces_category';
 import styles from './spaces_sidebar.module.scss';
 import SpacesSidebarHeader from './spaces_sidebar_header';
-import SpacesSidebarNav, {type DocsNavKey} from './spaces_sidebar_nav';
+import SpacesSidebarNav from './spaces_sidebar_nav';
 import SpacesSidebarSearch from './spaces_sidebar_search';
 import {useSidebarSpaces} from './use_sidebar_spaces';
 
@@ -29,14 +29,8 @@ type Props = {
 const SpacesSidebar = ({onOpenSwitcher, onCreateSpace}: Props) => {
     const {formatMessage} = useIntl();
     const {displayName: teamName, description: teamDescription} = useTeamContext();
-    const {spaceId: selectedSpaceId, goToSpace, goHome} = useDocsNavigation();
+    const {spaceId: selectedSpaceId, paths} = useDocsNavigation();
     const {spacesById, spacesOrder, favoriteSpaceIds, favoritesCollapsed, toggleFavoritesCollapsed} = useSidebarSpaces(DND_ENABLED);
-    const [activeNav, setActiveNav] = useState<DocsNavKey>('home');
-
-    const selectNav = (key: DocsNavKey) => {
-        setActiveNav(key);
-        goHome();
-    };
 
     const renderSpace = (id: string, category: DndCategory) => {
         const space = spacesById.get(id);
@@ -50,7 +44,7 @@ const SpacesSidebar = ({onOpenSwitcher, onCreateSpace}: Props) => {
                 category={category}
                 active={selectedSpaceId === space.id}
                 dndEnabled={DND_ENABLED}
-                onSelect={goToSpace}
+                href={paths.space(space.id)}
             />
         );
     };
@@ -70,8 +64,11 @@ const SpacesSidebar = ({onOpenSwitcher, onCreateSpace}: Props) => {
                 <SpacesSidebarSearch onOpen={onOpenSwitcher}/>
             </div>
             <SpacesSidebarNav
-                active={selectedSpaceId ? null : activeNav}
-                onSelect={selectNav}
+
+                // Home is active whenever no space is routed — derived from the URL
+                // rather than tracked, so a back/forward navigation can't desync it.
+                active={selectedSpaceId ? null : 'home'}
+                homeHref={paths.home()}
             />
             <div className={styles.scroll}>
                 <SpacesCategory
diff --git a/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.test.tsx b/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.test.tsx
index 2b51dc9..2c7953c 100644
--- a/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.test.tsx
+++ b/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {fireEvent, screen} from '@testing-library/react';
+import {screen} from '@testing-library/react';
 import React from 'react';
 
 import SpacesSidebarNav from './spaces_sidebar_nav';
@@ -9,24 +9,24 @@ import SpacesSidebarNav from './spaces_sidebar_nav';
 import {renderWithContext} from '../../../tests/react_testing_utils';
 
 describe('SpacesSidebarNav', () => {
-    it('renders the Home entry and reports selection', () => {
-        const onSelect = jest.fn();
+    // A link, not a button: Home is an address, so it has to support opening in a
+    // new tab and copying like the rest of the product.
+    it('renders Home as a link to the product home', () => {
         renderWithContext(
             <SpacesSidebarNav
                 active={null}
-                onSelect={onSelect}
+                homeHref='/myteam/spaces'
             />,
         );
 
-        fireEvent.click(screen.getByRole('button', {name: 'Home'}));
-        expect(onSelect).toHaveBeenCalledWith('home');
+        expect(screen.getByRole('link', {name: 'Home'})).toHaveAttribute('href', '/myteam/spaces');
     });
 
     it('marks Home active', () => {
         const {container} = renderWithContext(
             <SpacesSidebarNav
                 active='home'
-                onSelect={jest.fn()}
+                homeHref='/myteam/spaces'
             />,
         );
 
diff --git a/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.tsx b/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.tsx
index b3d4537..66eba4e 100644
--- a/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.tsx
+++ b/webapp/src/components/spaces_sidebar/spaces_sidebar_nav.tsx
@@ -15,10 +15,10 @@ export type DocsNavKey = 'home' | 'notifications' | 'drafts';
 
 type Props = {
     active: DocsNavKey | null;
-    onSelect: (key: DocsNavKey) => void;
+    homeHref: string;
 };
 
-const SpacesSidebarNav = ({active, onSelect}: Props) => {
+const SpacesSidebarNav = ({active, homeHref}: Props) => {
     const {formatMessage} = useIntl();
 
     return (
@@ -27,7 +27,7 @@ const SpacesSidebarNav = ({active, onSelect}: Props) => {
                 leading={<HomeVariantOutlineIcon size={16}/>}
                 label={formatMessage({id: 'docs.sidebar.nav.home', defaultMessage: 'Home'})}
                 active={active === 'home'}
-                onClick={() => onSelect('home')}
+                to={homeHref}
             />
         </div>
     );

From 9ef19bdf505e3505836aa038f0cb70e6befa7193 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Wed, 5 Aug 2026 17:25:59 -0500
Subject: [PATCH 65/68] fix(docs): unclip row titles and drop link underlines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The page node's <Spacer/> was a second flex:1 sibling next to .rowLink,
splitting the free space with it — so the title's box stopped halfway
across the row and the Draft badge and favorite star floated in the
middle. .rowLink already grows; the spacer was redundant.

The stretched hit area (.rowLink::after) also painted over the title,
so hit-testing resolved the pointer to the anchor and the title never
saw the mouseenter its truncation tooltip listens for. Lifted it above,
as the chevron and menu already were.

Spaces sidebar rows never set text-decoration, so the host's anchor
styles underlined them once they became links. They now get the same
overflow tooltip as page tree rows, replacing a native title attribute
that fired whether or not the label was clipped. The space dot menu's
tooltip drops the space name, which the row it sits on already gives.

Context: reported clipped/underlined rows and missing node tooltips
while reviewing the Spaces UI branch.
---
 .../page_tree/page_tree_node.module.scss      |  9 +++
 .../space_view/page_tree/page_tree_node.tsx   |  3 -
 .../spaces_sidebar/sidebar_item.module.scss   |  6 ++
 .../spaces_sidebar/sidebar_item.test.tsx      | 58 +++++++++++++++++--
 .../spaces_sidebar/sidebar_item.tsx           | 33 +++++++++--
 .../spaces_sidebar/space_item_menu.tsx        |  6 +-
 6 files changed, 102 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
index f04bdae..50b6937 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.module.scss
@@ -65,6 +65,15 @@
     z-index: 1;
 }
 
+// Lifted above the stretched hit area for the sake of hover, not clicks: under it,
+// the pointer's target is the anchor and the title never sees a mouseenter — which
+// is what its truncation tooltip listens for. Raising it changes nothing about the
+// click, since the title sits inside the anchor either way.
+.title {
+    position: relative;
+    z-index: 1;
+}
+
 // The whole row is the click target, so it owns the only hover/selected state
 // in the tree; the chevron inside only tints itself. Nesting is applied as a
 // left margin (not padding) so the hitbox and its hover/selected background
diff --git a/webapp/src/components/space_view/page_tree/page_tree_node.tsx b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
index 3fa7f65..7fd7a0e 100644
--- a/webapp/src/components/space_view/page_tree/page_tree_node.tsx
+++ b/webapp/src/components/space_view/page_tree/page_tree_node.tsx
@@ -21,7 +21,6 @@ import {WithTooltip} from '@mattermost/shared/components/tooltip';
 import type {PageNode} from 'store/page_tree';
 
 import PageMenu from 'components/page_menu/page_menu';
-import Spacer from 'components/spacer/spacer';
 
 import {MAX_PAGE_DEPTH} from './depth';
 import {usePageDragDrop} from './dnd/use_page_drag_drop';
@@ -296,8 +295,6 @@ const PageTreeNode = ({node, activePageId, collapsed, descendants, subtreeHeight
                             <StarIcon size={12}/>
                         </span>
                     )}
-                    <Spacer/>
-
                     <PageMenu
                         spaceId={spaceId}
                         pageId={id}
diff --git a/webapp/src/components/spaces_sidebar/sidebar_item.module.scss b/webapp/src/components/spaces_sidebar/sidebar_item.module.scss
index 419f35c..a3a4b59 100644
--- a/webapp/src/components/spaces_sidebar/sidebar_item.module.scss
+++ b/webapp/src/components/spaces_sidebar/sidebar_item.module.scss
@@ -40,6 +40,12 @@
     border: none;
     background: transparent;
     cursor: pointer;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
 }
 
 .icon {
diff --git a/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx b/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx
index f8d4723..f47c764 100644
--- a/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx
+++ b/webapp/src/components/spaces_sidebar/sidebar_item.test.tsx
@@ -6,6 +6,19 @@ import React from 'react';
 
 import SidebarItem from './sidebar_item';
 
+// The real tooltip opens on a rested pointer — a timer no synthetic event drives —
+// and portals itself out of the tree. The stub records what it was asked to do.
+jest.mock('@mattermost/shared/components/tooltip', () => ({
+    WithTooltip: ({title, disabled, children}: {title: string; disabled?: boolean; children: React.ReactNode}) => (
+        <span
+            data-tooltip={title}
+            data-tooltip-disabled={String(Boolean(disabled))}
+        >
+            {children}
+        </span>
+    ),
+}));
+
 import {renderWithContext} from '../../../tests/react_testing_utils';
 
 describe('SidebarItem', () => {
@@ -23,7 +36,7 @@ describe('SidebarItem', () => {
         expect(screen.getByRole('button', {name: 'menu'})).toBeInTheDocument();
     });
 
-    it('fires onClick and applies the title', () => {
+    it('fires onClick', () => {
         const onClick = jest.fn();
         render(
             <SidebarItem
@@ -34,9 +47,7 @@ describe('SidebarItem', () => {
             />,
         );
 
-        const button = screen.getByRole('button', {name: 'Home'});
-        expect(button).toHaveAttribute('title', 'Home');
-        fireEvent.click(button);
+        fireEvent.click(screen.getByRole('button', {name: 'Home'}));
         expect(onClick).toHaveBeenCalledTimes(1);
     });
 
@@ -81,3 +92,42 @@ describe('SidebarItem as a link', () => {
         expect(screen.getByRole('button', {name: 'Engineering'})).toBeInTheDocument();
     });
 });
+
+// jsdom has no layout, so a clipped label is faked at the property level: the hook
+// behind the tooltip compares scrollWidth against clientWidth. The tooltip itself is
+// stubbed — it opens on a rested pointer, which no synthetic event reproduces — so
+// what is asserted here is the gate, which is the part this component owns.
+describe('SidebarItem label tooltip', () => {
+    const setLabelWidths = (scroll: number, client: number) => {
+        jest.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(scroll);
+        jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(client);
+    };
+
+    afterEach(() => jest.restoreAllMocks());
+
+    const renderLabel = (label: string, widths: [number, number], title?: string) => {
+        setLabelWidths(...widths);
+        render(
+            <SidebarItem
+                leading={null}
+                label={label}
+                title={title}
+            />,
+        );
+        return screen.getByText(label).closest('[data-tooltip]');
+    };
+
+    it('offers the full name for a clipped label', () => {
+        expect(renderLabel('A space with a very long name', [240, 120], 'A space with a very long name')).
+            toHaveAttribute('data-tooltip-disabled', 'false');
+    });
+
+    it('stays quiet when the label fits', () => {
+        expect(renderLabel('Engineering', [120, 120], 'Engineering')).
+            toHaveAttribute('data-tooltip-disabled', 'true');
+    });
+
+    it('renders no tooltip for a row with no name to fall back to', () => {
+        expect(renderLabel('Home', [240, 120])).toBeNull();
+    });
+});
diff --git a/webapp/src/components/spaces_sidebar/sidebar_item.tsx b/webapp/src/components/spaces_sidebar/sidebar_item.tsx
index 669ed93..f043f22 100644
--- a/webapp/src/components/spaces_sidebar/sidebar_item.tsx
+++ b/webapp/src/components/spaces_sidebar/sidebar_item.tsx
@@ -2,9 +2,12 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
+import {useTextOverflow} from 'hooks/text_overflow';
 import React from 'react';
 import {Link} from 'react-router-dom';
 
+import {WithTooltip} from '@mattermost/shared/components/tooltip';
+
 import styles from './sidebar_item.module.scss';
 
 type Props = {
@@ -12,6 +15,9 @@ type Props = {
     label: React.ReactNode;
     active?: boolean;
     muted?: boolean;
+
+    // The label as plain text, for the tooltip a clipped row falls back to. Rows
+    // whose label cannot be clipped (a fixed one that always fits) can omit it.
     title?: string;
     trailing?: React.ReactNode;
     revealTrailingOnHover?: boolean;
@@ -28,13 +34,32 @@ type Props = {
 };
 
 const SidebarItem = ({leading, label, active = false, muted = true, title, trailing, revealTrailingOnHover = false, to, onClick, draggable}: Props) => {
+    const [labelClipped, labelRef] = useTextOverflow();
+
+    const labelText = (
+        <span
+            ref={labelRef}
+            className={classNames(styles.label, {[styles.bright]: active || !muted})}
+        >
+            {label}
+        </span>
+    );
+
     const content = (
         <>
             <span className={styles.icon}>{leading}</span>
             <span className={styles.content}>
-                <span className={classNames(styles.label, {[styles.bright]: active || !muted})}>
-                    {label}
-                </span>
+                {title ? (
+
+                    // Only a clipped label gets a tooltip; a fully visible one would
+                    // just repeat the text under the pointer.
+                    <WithTooltip
+                        title={title}
+                        disabled={!labelClipped}
+                    >
+                        {labelText}
+                    </WithTooltip>
+                ) : labelText}
             </span>
         </>
     );
@@ -46,7 +71,6 @@ const SidebarItem = ({leading, label, active = false, muted = true, title, trail
                 <Link
                     className={styles.button}
                     to={to}
-                    title={title}
                     draggable={draggable}
                     onClick={onClick}
                 >
@@ -56,7 +80,6 @@ const SidebarItem = ({leading, label, active = false, muted = true, title, trail
                 <button
                     type='button'
                     className={styles.button}
-                    title={title}
                     onClick={onClick}
                 >
                     {content}
diff --git a/webapp/src/components/spaces_sidebar/space_item_menu.tsx b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
index 44e0502..6d4b1ff 100644
--- a/webapp/src/components/spaces_sidebar/space_item_menu.tsx
+++ b/webapp/src/components/spaces_sidebar/space_item_menu.tsx
@@ -42,14 +42,18 @@ const SpaceItemMenu = ({space}: Props) => {
         setConfirmLeaveOpen(false);
     }, [leaveThisSpace]);
 
+    // The accessible name carries the space, since a screen reader reaching this
+    // button has no row to read it from. The tooltip drops it: the pointer is already
+    // resting on the row, so repeating its name there is noise.
     const menuLabel = formatMessage({id: 'docs.sidebar.space.menu', defaultMessage: 'Space options for {name}'}, {name: space.title});
+    const tooltipLabel = formatMessage({id: 'docs.sidebar.space.menuShort', defaultMessage: 'Space options'});
 
     return (
         <>
             <Menu
                 ariaLabel={menuLabel}
                 align='right'
-                tooltip={menuLabel}
+                tooltip={tooltipLabel}
                 trigger={(
                     <button
                         type='button'

From 7507f457115a8b9e37a84ddd9f777d6f620bc883 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Wed, 5 Aug 2026 17:26:49 -0500
Subject: [PATCH 66/68] feat(docs): offer Publish while reading a draft

An unpublished page is invisible to everyone but its author, so the
action that fixes that shouldn't require a detour through edit mode.
Update stays editing-only: it applies edits already made, which is
nothing a reader of a published page needs offered.

Context: "Publish should still be available to drafts in read mode".
---
 webapp/src/components/space_view/page_header.test.tsx | 10 +++++++++-
 webapp/src/components/space_view/page_header.tsx      | 11 ++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/space_view/page_header.test.tsx b/webapp/src/components/space_view/page_header.test.tsx
index 3966d34..b35e98a 100644
--- a/webapp/src/components/space_view/page_header.test.tsx
+++ b/webapp/src/components/space_view/page_header.test.tsx
@@ -108,7 +108,15 @@ describe('PageHeader publish controls', () => {
         expect(screen.getByRole('button', {name: 'Update'})).toBeDisabled();
     });
 
-    it('shows neither while reading', () => {
+    // An unpublished page is invisible to everyone else until it lands, so the way
+    // out of that state stays offered without a trip through edit mode.
+    it('offers Publish while reading an unpublished page', () => {
+        renderHeader({page: undefined, draft: DRAFT});
+
+        expect(screen.getByRole('button', {name: 'Publish'})).toBeEnabled();
+    });
+
+    it('hides Update while reading a published page', () => {
         renderHeader({draft: DRAFT});
 
         expect(screen.queryByRole('button', {name: 'Update'})).not.toBeInTheDocument();
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 2aec5a6..31a7be2 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -184,8 +184,13 @@ const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onTog
                 )}
 
                 {/* Publish/Update sits before Close: the action that commits the
-                    work reads first, and leaving is the fallback beside it. */}
-                {editing && subject && (unpublished ? (
+                    work reads first, and leaving is the fallback beside it.
+
+                    Publish shows in both modes — an unpublished page is invisible to
+                    everyone else until it lands, so that stays offered while reading
+                    it. Update is an editing action: with the page already published
+                    there is nothing urgent to offer a reader. */}
+                {unpublished ? (
                     <Button
                         emphasis='primary'
                         size='sm'
@@ -197,7 +202,7 @@ const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onTog
                             defaultMessage='Publish'
                         />
                     </Button>
-                ) : (
+                ) : (editing && subject && (
                     <Button
                         emphasis='primary'
                         size='sm'

From 13cbc98cdd3f68e1576fc43b6b3428b28efdac35 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Wed, 5 Aug 2026 17:28:13 -0500
Subject: [PATCH 67/68] feat(docs): add a reusable RHS with routed open state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Space info was the only right-hand panel and owned its whole frame, so
a second one had nothing to build on. RhsPanel now holds the frame —
resizable column, product-header chrome, heading, close, optional back
— and panels supply only their contents. Its `name` doubles as the
region's accessible name and the interpolation in the resize and back
labels, replacing three space-specific strings with generic ones.

Open state moves from local state into the URL via useRhs, so it
survives a reload and can be linked. Every change replaces the history
entry: a panel is a view of the page, not a place, and pushing would
make Back mean "hide the panel" for as many times as the reader toggled
one. An unrecognized ?rhs= reads as closed.

The Comments control in the page header now opens a placeholder panel —
the frame and routing are real, the contents are not.

withQuery() edits the existing query in place, so edit mode and the open
panel no longer clobber each other: toggling the editor kept only
?edit=1 and would have closed the panel.

Context: "Is it in a reusable pattern? If not, let's add a
dummy/placeholder RHS for the Comments button... would also be nice to
have routing integration built in. Opening or closing an RHS shouldn't
push a new location to the history stack, but rather replace it."
---
 webapp/i18n/en.json                           |   9 +-
 .../comments/comments_panel.module.scss       |   6 +
 .../components/comments/comments_panel.tsx    |  33 ++++++
 .../src/components/rhs/rhs_panel.module.scss  |  36 ++++++
 webapp/src/components/rhs/rhs_panel.test.tsx  |  65 ++++++++++
 webapp/src/components/rhs/rhs_panel.tsx       | 112 ++++++++++++++++++
 .../space_info/space_info_panel.module.scss   |  37 ------
 .../space_info/space_info_panel.tsx           | 111 ++++-------------
 .../space_view/page_header.test.tsx           |  33 +++++-
 .../src/components/space_view/page_header.tsx |  14 ++-
 .../src/components/space_view/space_view.tsx  |  29 +++--
 webapp/src/hooks/navigation.ts                |  15 ++-
 webapp/src/hooks/rhs.test.tsx                 | 111 +++++++++++++++++
 webapp/src/hooks/rhs.ts                       |  71 +++++++++++
 webapp/src/routing/paths.ts                   |   6 +
 webapp/src/routing/query.ts                   |  17 +++
 16 files changed, 559 insertions(+), 146 deletions(-)
 create mode 100644 webapp/src/components/comments/comments_panel.module.scss
 create mode 100644 webapp/src/components/comments/comments_panel.tsx
 create mode 100644 webapp/src/components/rhs/rhs_panel.module.scss
 create mode 100644 webapp/src/components/rhs/rhs_panel.test.tsx
 create mode 100644 webapp/src/components/rhs/rhs_panel.tsx
 create mode 100644 webapp/src/hooks/rhs.test.tsx
 create mode 100644 webapp/src/hooks/rhs.ts
 create mode 100644 webapp/src/routing/query.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 0bf6622..60b5b4e 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -6,6 +6,8 @@
   "docs.archiveSpace.title": "Archive {name}",
   "docs.basicInputModal.cancel": "Cancel",
   "docs.basicInputModal.confirm": "Save",
+  "docs.comments.placeholder": "Comments on this page will appear here.",
+  "docs.comments.title": "Comments",
   "docs.confirmModal.cancel": "Cancel",
   "docs.confirmModal.confirm": "Confirm",
   "docs.createSpace.cancel": "Cancel",
@@ -117,6 +119,9 @@
   "docs.renamePage.confirm": "Save",
   "docs.renamePage.label": "Page name",
   "docs.renamePage.title": "Rename page",
+  "docs.rhs.back": "Back to {name}",
+  "docs.rhs.close": "Close",
+  "docs.rhs.resize": "Resize {name}",
   "docs.saveChanges.error": "There was an error saving your changes",
   "docs.saveChanges.message": "You have unsaved changes",
   "docs.saveChanges.reset": "Reset",
@@ -150,6 +155,7 @@
   "docs.sidebar.space.favoritePartial": "Some pages are favorited",
   "docs.sidebar.space.leave": "Leave space",
   "docs.sidebar.space.menu": "Space options for {name}",
+  "docs.sidebar.space.menuShort": "Space options",
   "docs.sidebar.space.unfavorite": "Remove from favorites",
   "docs.sidebar.team.createTeam": "Create a team",
   "docs.sidebar.team.invite": "Invite people",
@@ -188,8 +194,6 @@
   "docs.space.unfavorite": "Remove from favorites",
   "docs.space.update": "Update",
   "docs.space.updated": "Updated {relative}",
-  "docs.spaceInfo.back": "Back to space info",
-  "docs.spaceInfo.close": "Close info",
   "docs.spaceInfo.created": "Created",
   "docs.spaceInfo.description": "Description",
   "docs.spaceInfo.descriptionLabel": "Space description",
@@ -203,7 +207,6 @@
   "docs.spaceInfo.menu.title": "Space info actions",
   "docs.spaceInfo.noDescription": "No description",
   "docs.spaceInfo.pages": "Pages",
-  "docs.spaceInfo.resize": "Resize space info",
   "docs.spaceInfo.title": "Space info",
   "docs.spaceSettings.archive.button": "Archive space",
   "docs.spaceSettings.archive.confirmBody": "“{title}” and its pages will be archived and members will lose access. This can be undone by an admin.",
diff --git a/webapp/src/components/comments/comments_panel.module.scss b/webapp/src/components/comments/comments_panel.module.scss
new file mode 100644
index 0000000..f4242da
--- /dev/null
+++ b/webapp/src/components/comments/comments_panel.module.scss
@@ -0,0 +1,6 @@
+.empty {
+    margin: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-size: 14px;
+    line-height: 20px;
+}
diff --git a/webapp/src/components/comments/comments_panel.tsx b/webapp/src/components/comments/comments_panel.tsx
new file mode 100644
index 0000000..0929d84
--- /dev/null
+++ b/webapp/src/components/comments/comments_panel.tsx
@@ -0,0 +1,33 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import RhsPanel from 'components/rhs/rhs_panel';
+
+import styles from './comments_panel.module.scss';
+
+// Placeholder: the panel opens, closes and resizes like the rest of the RHS, and
+// carries its state in the URL, but has no comments in it yet. Here so the header's
+// Comments control leads somewhere while threads are built out.
+const CommentsPanel = ({onClose}: {onClose: () => void}) => {
+    const {formatMessage} = useIntl();
+
+    return (
+        <RhsPanel
+            name={formatMessage({id: 'docs.comments.title', defaultMessage: 'Comments'})}
+            widthKey='comments'
+            onClose={onClose}
+        >
+            <p className={styles.empty}>
+                <FormattedMessage
+                    id='docs.comments.placeholder'
+                    defaultMessage='Comments on this page will appear here.'
+                />
+            </p>
+        </RhsPanel>
+    );
+};
+
+export default CommentsPanel;
diff --git a/webapp/src/components/rhs/rhs_panel.module.scss b/webapp/src/components/rhs/rhs_panel.module.scss
new file mode 100644
index 0000000..031b1ca
--- /dev/null
+++ b/webapp/src/components/rhs/rhs_panel.module.scss
@@ -0,0 +1,36 @@
+// Full-height right column; the width comes from the resize hook, so the panel
+// only holds its flex/`position` context here. `position: relative` anchors the
+// resize handle on the left edge.
+.panel {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: var(--center-channel-bg);
+}
+
+// Dragging sets the width every frame; no transition to fight the pointer.
+.resizing {
+    transition: none;
+}
+
+.headerTitle {
+    margin: 0;
+    color: var(--center-channel-color);
+    font-family: 'Metropolis', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.body {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
+    padding: 20px 16px;
+}
diff --git a/webapp/src/components/rhs/rhs_panel.test.tsx b/webapp/src/components/rhs/rhs_panel.test.tsx
new file mode 100644
index 0000000..b2f4b98
--- /dev/null
+++ b/webapp/src/components/rhs/rhs_panel.test.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import RhsPanel from './rhs_panel';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+const renderPanel = (props: Partial<React.ComponentProps<typeof RhsPanel>> = {}) =>
+    renderWithContext(
+        <RhsPanel
+            name='Space info'
+            widthKey='test'
+            onClose={jest.fn()}
+            {...props}
+        >
+            <p>{'body'}</p>
+        </RhsPanel>,
+    );
+
+describe('RhsPanel', () => {
+    // The region's name is what a screen reader reads on the way in, and it stays
+    // the panel's rather than the current screen's.
+    it('names the region and heads it with the panel name', () => {
+        renderPanel();
+
+        expect(screen.getByRole('complementary', {name: 'Space info'})).toBeInTheDocument();
+        expect(screen.getByRole('heading', {name: 'Space info'})).toBeInTheDocument();
+        expect(screen.getByText('body')).toBeInTheDocument();
+    });
+
+    it('heads a drilled-in screen with its own title, keeping the region name', () => {
+        renderPanel({title: 'Members', onBack: jest.fn()});
+
+        expect(screen.getByRole('complementary', {name: 'Space info'})).toBeInTheDocument();
+        expect(screen.getByRole('heading', {name: 'Members'})).toBeInTheDocument();
+    });
+
+    it('closes on request', () => {
+        const onClose = jest.fn();
+        renderPanel({onClose});
+
+        fireEvent.click(screen.getByRole('button', {name: 'Close'}));
+
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    // Back is what a drilled-in screen supplies; the root screen has nowhere to go.
+    it('offers no back control at the root', () => {
+        renderPanel();
+
+        expect(screen.queryByRole('button', {name: 'Back to Space info'})).not.toBeInTheDocument();
+    });
+
+    it('goes back from a drilled-in screen', () => {
+        const onBack = jest.fn();
+        renderPanel({title: 'Members', onBack});
+
+        fireEvent.click(screen.getByRole('button', {name: 'Back to Space info'}));
+
+        expect(onBack).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/webapp/src/components/rhs/rhs_panel.tsx b/webapp/src/components/rhs/rhs_panel.tsx
new file mode 100644
index 0000000..8b18534
--- /dev/null
+++ b/webapp/src/components/rhs/rhs_panel.tsx
@@ -0,0 +1,112 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import {useSidebarWidth} from 'hooks/sidebar_width';
+import React, {useState} from 'react';
+import {useIntl} from 'react-intl';
+
+import ChevronLeftIcon from '@mattermost/compass-icons/components/chevron-left';
+import CloseIcon from '@mattermost/compass-icons/components/close';
+
+import {Button} from 'components/form_controls/button';
+import Header from 'components/header/header';
+import ResizableDivider from 'components/resizable_divider/resizable_divider';
+
+import styles from './rhs_panel.module.scss';
+
+const DEFAULT_WIDTH = 400;
+const MIN_WIDTH = 304;
+const MAX_WIDTH = 776;
+
+type Props = {
+
+    /**
+     * The panel's name, stable across its screens. Names the region for a screen
+     * reader and stands in for it in the resize and back controls.
+     */
+    name: string;
+
+    /** The visible heading. Defaults to `name`; a drilled-in screen overrides it. */
+    title?: React.ReactNode;
+
+    /** Distinguishes this panel's stored width from other panels'. */
+    widthKey: string;
+
+    /** Given only on a drilled-in screen — its presence is what renders Back. */
+    onBack?: () => void;
+    onClose: () => void;
+    children: React.ReactNode;
+};
+
+/**
+ * The right-hand panel shell, mirroring core's RHS: a resizable full-height column
+ * whose header shares the product header chrome, so it lines up with the space
+ * header rather than starting below it.
+ *
+ * Holds the frame only — the width, the resize handle, the heading and the close
+ * (and optional back) controls. What the panel is *for* is its children. Open/close
+ * state belongs to the caller, which should route it through `useRhs`.
+ */
+const RhsPanel = ({name, title, widthKey, onBack, onClose, children}: Props) => {
+    const {formatMessage} = useIntl();
+    const {width, setWidth, commitWidth} = useSidebarWidth(widthKey, DEFAULT_WIDTH);
+    const [resizing, setResizing] = useState(false);
+
+    return (
+        <aside
+            className={classNames(styles.panel, {[styles.resizing]: resizing})}
+            style={{width}}
+            aria-label={name}
+        >
+            <ResizableDivider
+                ariaLabel={formatMessage({id: 'docs.rhs.resize', defaultMessage: 'Resize {name}'}, {name})}
+                side='right'
+                width={width}
+                minWidth={MIN_WIDTH}
+                maxWidth={MAX_WIDTH}
+                defaultWidth={DEFAULT_WIDTH}
+                onResize={(next) => {
+                    setResizing(true);
+                    setWidth(next);
+                }}
+                onResizeEnd={(next) => {
+                    setResizing(false);
+                    commitWidth(next);
+                }}
+            />
+            <Header
+                left={(
+                    <>
+                        {onBack && (
+                            <Button
+                                emphasis='quaternary'
+                                size='sm'
+                                className='btn-icon'
+                                aria-label={formatMessage({id: 'docs.rhs.back', defaultMessage: 'Back to {name}'}, {name})}
+                                onClick={onBack}
+                            >
+                                <ChevronLeftIcon size={18}/>
+                            </Button>
+                        )}
+                        <h2 className={styles.headerTitle}>{title ?? name}</h2>
+                    </>
+                )}
+                right={(
+                    <Button
+                        emphasis='quaternary'
+                        size='sm'
+                        className='btn-icon'
+                        aria-label={formatMessage({id: 'docs.rhs.close', defaultMessage: 'Close'})}
+                        onClick={onClose}
+                    >
+                        <CloseIcon size={18}/>
+                    </Button>
+                )}
+            />
+            <div className={styles.body}>{children}</div>
+        </aside>
+    );
+};
+
+export default RhsPanel;
diff --git a/webapp/src/components/space_info/space_info_panel.module.scss b/webapp/src/components/space_info/space_info_panel.module.scss
index a2b590e..ae3e808 100644
--- a/webapp/src/components/space_info/space_info_panel.module.scss
+++ b/webapp/src/components/space_info/space_info_panel.module.scss
@@ -1,40 +1,3 @@
-// Full-height right column; the width comes from the resize hook, so the panel
-// only holds its flex/`position` context here. `position: relative` anchors the
-// resize handle on the left edge.
-.panel {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-    border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
-    background: var(--center-channel-bg);
-}
-
-// Dragging sets the width every frame; no transition to fight the pointer.
-.resizing {
-    transition: none;
-}
-
-.headerTitle {
-    margin: 0;
-    color: var(--center-channel-color);
-    font-family: 'Metropolis', sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-}
-
-.body {
-    display: flex;
-    flex: 1 1 0;
-    flex-direction: column;
-    gap: 20px;
-    overflow-y: auto;
-    padding: 20px 16px;
-}
-
 .identity {
     display: flex;
     align-items: center;
diff --git a/webapp/src/components/space_info/space_info_panel.tsx b/webapp/src/components/space_info/space_info_panel.tsx
index 4daccb6..67e220c 100644
--- a/webapp/src/components/space_info/space_info_panel.tsx
+++ b/webapp/src/components/space_info/space_info_panel.tsx
@@ -4,17 +4,14 @@
 import classNames from 'classnames';
 import {useSpaceMemberProfiles} from 'hooks/members';
 import {useAppDispatch} from 'hooks/redux';
-import {useSidebarWidth} from 'hooks/sidebar_width';
 import {useSpaceStats} from 'hooks/spaces';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {SpaceIcon} from 'utils/space_icon';
 import {SPACE_DESCRIPTION_MAX_LENGTH} from 'validation/space_schema';
 import {Timestamp} from 'webapp_globals';
 import type {TimestampUnit} from 'webapp_globals';
 
-import ChevronLeftIcon from '@mattermost/compass-icons/components/chevron-left';
-import CloseIcon from '@mattermost/compass-icons/components/close';
 import PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';
 
 import {updateSpace} from 'store/actions';
@@ -22,9 +19,8 @@ import {useSpacePermissions} from 'store/permissions';
 
 import BasicInputModal from 'components/basic_input_modal/basic_input_modal';
 import {Button} from 'components/form_controls/button';
-import Header from 'components/header/header';
 import {openDocsModal} from 'components/modals';
-import ResizableDivider from 'components/resizable_divider/resizable_divider';
+import RhsPanel from 'components/rhs/rhs_panel';
 
 import type {Space} from 'types/docs';
 
@@ -32,10 +28,6 @@ import SpaceInfoMembers from './space_info_members';
 import SpaceInfoMenu from './space_info_menu';
 import styles from './space_info_panel.module.scss';
 
-const DEFAULT_INFO_WIDTH = 400;
-const MIN_INFO_WIDTH = 304;
-const MAX_INFO_WIDTH = 776;
-
 // Relative "Created …" buckets for the host Timestamp, mirroring the page header's
 // relative spec but reaching back far enough for an old space.
 const CREATED_TIME_SPEC: TimestampUnit[] = [
@@ -58,22 +50,18 @@ type Props = {
     onClose: () => void;
 };
 
-// Right-hand panel mirroring core's Channel Info RHS: a full-height column whose
-// header shares the product header chrome (so it lines up with the space header),
-// over the space identity, its inline-editable description, an action menu, the
-// member list, and a small meta area. The description is the only field editable
-// from here; everything else is read-only and lives in Space Settings.
+// The Space Info RHS, mirroring core's Channel Info: the space identity, its
+// inline-editable description, an action menu, the member list, and a small meta
+// area — or, drilled in, the full member list on its own. The description is the
+// only field editable from here; everything else is read-only and lives in Space
+// Settings.
 const SpaceInfoPanel = ({space, view, onViewChange, onClose}: Props) => {
     const {formatMessage} = useIntl();
     const {pageCount, memberCount} = useSpaceStats(space.id);
     const members = useSpaceMemberProfiles(space.id);
-    const {width, setWidth, commitWidth} = useSidebarWidth('spaceInfo', DEFAULT_INFO_WIDTH);
-    const [resizing, setResizing] = useState(false);
     const dispatch = useAppDispatch();
     const {canManageMembers} = useSpacePermissions(space.id);
 
-    const closeLabel = formatMessage({id: 'docs.spaceInfo.close', defaultMessage: 'Close info'});
-    const backLabel = formatMessage({id: 'docs.spaceInfo.back', defaultMessage: 'Back to space info'});
     const editDescriptionLabel = formatMessage({id: 'docs.spaceInfo.editDescription', defaultMessage: 'Edit description'});
 
     // The description is the one field editable from here; everything else lives
@@ -108,77 +96,22 @@ const SpaceInfoPanel = ({space, view, onViewChange, onClose}: Props) => {
     /* eslint-enable react/style-prop-object */
 
     return (
-        <aside
-            className={classNames(styles.panel, {[styles.resizing]: resizing})}
-            style={{width}}
-            aria-label={formatMessage({id: 'docs.spaceInfo.title', defaultMessage: 'Space info'})}
+        <RhsPanel
+            name={formatMessage({id: 'docs.spaceInfo.title', defaultMessage: 'Space info'})}
+            title={view === 'members' ? (
+                <FormattedMessage
+                    id='docs.spaceInfo.members'
+                    defaultMessage='Members'
+                />
+            ) : undefined}
+            widthKey='spaceInfo'
+            onBack={view === 'root' ? undefined : () => onViewChange('root')}
+            onClose={onClose}
         >
-            <ResizableDivider
-                ariaLabel={formatMessage({id: 'docs.spaceInfo.resize', defaultMessage: 'Resize space info'})}
-                side='right'
-                width={width}
-                minWidth={MIN_INFO_WIDTH}
-                maxWidth={MAX_INFO_WIDTH}
-                defaultWidth={DEFAULT_INFO_WIDTH}
-                onResize={(next) => {
-                    setResizing(true);
-                    setWidth(next);
-                }}
-                onResizeEnd={(next) => {
-                    setResizing(false);
-                    commitWidth(next);
-                }}
-            />
-            <Header
-                left={(
-                    <>
-                        {view !== 'root' && (
-                            <Button
-                                emphasis='quaternary'
-                                size='sm'
-                                className='btn-icon'
-                                tooltip={backLabel}
-                                onClick={() => onViewChange('root')}
-                            >
-                                <ChevronLeftIcon size={18}/>
-                            </Button>
-                        )}
-                        <h2 className={styles.headerTitle}>
-                            {view === 'members' ? (
-                                <FormattedMessage
-                                    id='docs.spaceInfo.members'
-                                    defaultMessage='Members'
-                                />
-                            ) : (
-                                <FormattedMessage
-                                    id='docs.spaceInfo.title'
-                                    defaultMessage='Space info'
-                                />
-                            )}
-                        </h2>
-                    </>
-                )}
-                right={(
-                    <Button
-                        emphasis='quaternary'
-                        size='sm'
-                        className='btn-icon'
-                        aria-label={closeLabel}
-                        onClick={onClose}
-                    >
-                        <CloseIcon size={18}/>
-                    </Button>
-                )}
-            />
-
-            {view === 'members' && (
-                <div className={styles.body}>
-                    <SpaceInfoMembers members={members}/>
-                </div>
-            )}
+            {view === 'members' && <SpaceInfoMembers members={members}/>}
 
             {view === 'root' && (
-                <div className={styles.body}>
+                <>
                     <div className={styles.identity}>
                         <span
                             className={styles.icon}
@@ -255,9 +188,9 @@ const SpaceInfoPanel = ({space, view, onViewChange, onClose}: Props) => {
                             </div>
                         </dl>
                     </section>
-                </div>
+                </>
             )}
-        </aside>
+        </RhsPanel>
     );
 };
 
diff --git a/webapp/src/components/space_view/page_header.test.tsx b/webapp/src/components/space_view/page_header.test.tsx
index b35e98a..0dfceb4 100644
--- a/webapp/src/components/space_view/page_header.test.tsx
+++ b/webapp/src/components/space_view/page_header.test.tsx
@@ -23,18 +23,23 @@ jest.mock('hooks/favorites', () => ({
 const SPACE = makeSpace('eng', 'Engineering');
 const PAGE = makePage('runbook', 'eng', 'Runbook');
 
-const renderHeader = (props: Partial<React.ComponentProps<typeof PageHeader>> = {}) =>
+const PAGE_URL = '/myteam/spaces/eng/runbook';
+
+const renderHeader = (props: Partial<React.ComponentProps<typeof PageHeader>> = {}, route = PAGE_URL) =>
     renderWithContext(
         <PageHeader
             space={SPACE}
             page={PAGE}
             treeOpen={false}
             editing={false}
+            commentsOpen={false}
             onTogglePages={jest.fn()}
+            onToggleComments={jest.fn()}
             onToggleEdit={jest.fn()}
             onPublish={jest.fn()}
             {...props}
         />,
+        {route},
     );
 
 describe('PageHeader edit control', () => {
@@ -132,3 +137,29 @@ describe('PageHeader publish controls', () => {
         expect(onPublish).toHaveBeenCalled();
     });
 });
+
+describe('PageHeader comments control', () => {
+    it('reports a click on the control', () => {
+        const onToggleComments = jest.fn();
+        renderHeader({onToggleComments});
+
+        fireEvent.click(screen.getByRole('button', {name: 'Comments'}));
+
+        expect(onToggleComments).toHaveBeenCalledTimes(1);
+    });
+
+    // The panel it opens is elsewhere on screen, so the control carries whether it
+    // is showing rather than leaving that to be inferred.
+    it('reports the open panel', () => {
+        renderHeader({commentsOpen: true});
+
+        expect(screen.getByRole('button', {name: 'Comments'})).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('offers no comments control on the space home, where no page is routed', () => {
+        renderHeader({page: undefined});
+
+        expect(screen.queryByRole('button', {name: 'Comments'})).not.toBeInTheDocument();
+    });
+});
+
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 31a7be2..45c57e4 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -65,15 +65,17 @@ type Props = {
     draft?: Draft;
     treeOpen: boolean;
     editing: boolean;
+    commentsOpen: boolean;
     onTogglePages: () => void;
+    onToggleComments: () => void;
     onToggleEdit: () => void;
     onPublish: () => void;
 };
 
-// Comments, overflow and expand are visual scaffolding wired in later passes; the
-// pages toggle drives the page tree panel, and Edit/Close plus Publish/Update are
-// live.
-const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onToggleEdit, onPublish}: Props) => {
+// Overflow and expand are visual scaffolding wired in later passes; the pages toggle
+// drives the page tree panel, Comments opens its right-hand panel, and Edit/Close
+// plus Publish/Update are live.
+const PageHeader = ({space, page, draft, treeOpen, editing, commentsOpen, onTogglePages, onToggleComments, onToggleEdit, onPublish}: Props) => {
     const {formatMessage} = useIntl();
     const createRootPage = useCreateRootPage(space.id);
     const [publishing, setPublishing] = useState(false);
@@ -176,10 +178,12 @@ const PageHeader = ({space, page, draft, treeOpen, editing, onTogglePages, onTog
                     <Button
                         emphasis='quaternary'
                         size='sm'
-                        className='btn-icon'
+                        className={classNames('btn-icon', {active: commentsOpen})}
                         badge={true}
                         tooltip={commentsLabel}
+                        aria-pressed={commentsOpen}
                         leadingIcon={<MessageTextOutlineIcon size={18}/>}
+                        onClick={onToggleComments}
                     />
                 )}
 
diff --git a/webapp/src/components/space_view/space_view.tsx b/webapp/src/components/space_view/space_view.tsx
index 5e7624e..c1728b9 100644
--- a/webapp/src/components/space_view/space_view.tsx
+++ b/webapp/src/components/space_view/space_view.tsx
@@ -5,12 +5,14 @@ import {usePageDraft, usePublishDraft} from 'hooks/drafts';
 import {useDocsNavigation, useTogglePageEditMode} from 'hooks/navigation';
 import {useDefaultPagePath} from 'hooks/pages';
 import {useAppSelector} from 'hooks/redux';
+import {useRhs} from 'hooks/rhs';
 import {useSpaceStats} from 'hooks/spaces';
 import React, {useCallback, useState} from 'react';
 import {Redirect} from 'react-router-dom';
 
 import {arePagesLoadedForSpace, getPageInSpace} from 'store/selectors';
 
+import CommentsPanel from 'components/comments/comments_panel';
 import SpaceInfoPanel from 'components/space_info/space_info_panel';
 import type {SpaceInfoView} from 'components/space_info/space_info_panel';
 
@@ -46,12 +48,18 @@ const SpaceView = ({space}: {space: Space}) => {
     const {pageCount, memberCount} = useSpaceStats(space.id);
     const defaultPagePath = useDefaultPagePath(space);
     const [treeOpen, setTreeOpen] = useState(true);
-    const [infoView, setInfoView] = useState<SpaceInfoView | null>(null);
+
+    // Which panel sits in the right column, from the URL — see useRhs for why
+    // opening one replaces the history entry rather than pushing it.
+    const {rhs, openRhs, closeRhs, toggleRhs} = useRhs();
 
     const togglePages = useCallback(() => setTreeOpen((open) => !open), []);
-    const toggleInfo = useCallback(() => setInfoView((view) => (view ? null : 'root')), []);
-    const closeInfo = useCallback(() => setInfoView(null), []);
-    const showMembers = useCallback(() => setInfoView('members'), []);
+    const toggleInfo = useCallback(() => toggleRhs('info'), [toggleRhs]);
+    const toggleComments = useCallback(() => toggleRhs('comments'), [toggleRhs]);
+    const showMembers = useCallback(() => openRhs('info', 'members'), [openRhs]);
+
+    // 'root' is the panel's default screen, so it stays out of the URL.
+    const showInfoView = useCallback((view: SpaceInfoView) => openRhs('info', view === 'root' ? undefined : view), [openRhs]);
 
     // A space with a default page opens on that page; `<Redirect>` replaces the
     // space-home entry rather than pushing one.
@@ -87,7 +95,7 @@ const SpaceView = ({space}: {space: Space}) => {
                 <SpaceHeader
                     space={space}
                     memberCount={memberCount}
-                    infoOpen={infoView !== null}
+                    infoOpen={rhs?.id === 'info'}
                     onToggleInfo={toggleInfo}
                     onShowMembers={showMembers}
                 />
@@ -97,7 +105,9 @@ const SpaceView = ({space}: {space: Space}) => {
                     draft={draft}
                     treeOpen={treeOpen}
                     editing={isEditing}
+                    commentsOpen={rhs?.id === 'comments'}
                     onTogglePages={togglePages}
+                    onToggleComments={toggleComments}
                     onToggleEdit={toggleEdit}
                     onPublish={onPublish}
                 />
@@ -127,14 +137,15 @@ const SpaceView = ({space}: {space: Space}) => {
                     </div>
                 </div>
             </div>
-            {infoView && (
+            {rhs?.id === 'info' && (
                 <SpaceInfoPanel
                     space={space}
-                    view={infoView}
-                    onViewChange={setInfoView}
-                    onClose={closeInfo}
+                    view={rhs.view === 'members' ? 'members' : 'root'}
+                    onViewChange={showInfoView}
+                    onClose={closeRhs}
                 />
             )}
+            {rhs?.id === 'comments' && <CommentsPanel onClose={closeRhs}/>}
         </div>
     );
 };
diff --git a/webapp/src/hooks/navigation.ts b/webapp/src/hooks/navigation.ts
index 4da2699..b75331b 100644
--- a/webapp/src/hooks/navigation.ts
+++ b/webapp/src/hooks/navigation.ts
@@ -5,6 +5,7 @@ import {useTeamContext} from 'hooks/team';
 import {useCallback} from 'react';
 import {useHistory, useLocation, useRouteMatch} from 'react-router-dom';
 import {DOCS_DRAFT_ROUTE, DOCS_ROUTE, DOCS_SPACE_OVERVIEW_ROUTE, EDIT_QUERY, docsHomePath, docsPath, draftPath, editPagePath, overviewPath, pagePath, spacePath} from 'routing/paths';
+import {withQuery} from 'routing/query';
 
 type DocsRouteParams = {
     team?: string;
@@ -110,6 +111,7 @@ export function useDocsNavigation() {
  */
 export function useTogglePageEditMode(spaceId: string) {
     const history = useHistory();
+    const {search} = useLocation();
     const {pageId, isDraft, isEditing, paths} = useDocsNavigation();
 
     return useCallback(() => {
@@ -117,6 +119,15 @@ export function useTogglePageEditMode(spaceId: string) {
             return;
         }
         const base = isDraft ? paths.draft(spaceId, pageId) : paths.page(spaceId, pageId);
-        history.push(isEditing ? base : `${base}?${EDIT_QUERY}=1`);
-    }, [history, isDraft, isEditing, pageId, spaceId, paths]);
+
+        // Other queries ride along: an open right-hand panel is one of them, and
+        // entering or leaving the editor shouldn't close it.
+        history.push(withQuery(base, search, (params) => {
+            if (isEditing) {
+                params.delete(EDIT_QUERY);
+            } else {
+                params.set(EDIT_QUERY, '1');
+            }
+        }));
+    }, [history, search, isDraft, isEditing, pageId, spaceId, paths]);
 }
diff --git a/webapp/src/hooks/rhs.test.tsx b/webapp/src/hooks/rhs.test.tsx
new file mode 100644
index 0000000..183870e
--- /dev/null
+++ b/webapp/src/hooks/rhs.test.tsx
@@ -0,0 +1,111 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import {useRhs} from './rhs';
+
+import {renderWithContext} from '../../tests/react_testing_utils';
+
+const PAGE_URL = '/myteam/spaces/eng/runbook';
+
+// Exercised through a component, since the hook reads and writes the router.
+const Probe = () => {
+    const {rhs, openRhs, closeRhs, toggleRhs} = useRhs();
+
+    return (
+        <>
+            <span data-testid='state'>{rhs ? `${rhs.id}:${rhs.view ?? 'root'}` : 'closed'}</span>
+            <button
+                type='button'
+                onClick={() => toggleRhs('info')}
+            >{'toggle info'}</button>
+            <button
+                type='button'
+                onClick={() => toggleRhs('comments')}
+            >{'toggle comments'}</button>
+            <button
+                type='button'
+                onClick={() => openRhs('info', 'members')}
+            >{'open members'}</button>
+            <button
+                type='button'
+                onClick={closeRhs}
+            >{'close'}</button>
+        </>
+    );
+};
+
+const renderProbe = (route = PAGE_URL) => renderWithContext(<Probe/>, {route});
+
+const state = () => screen.getByTestId('state').textContent;
+
+const press = (name: string) => fireEvent.click(screen.getByRole('button', {name}));
+
+describe('useRhs', () => {
+    it('reads the open panel out of the URL', () => {
+        renderProbe(`${PAGE_URL}?rhs=info&rhsView=members`);
+
+        expect(state()).toBe('info:members');
+    });
+
+    it('reads an unknown panel as closed, so a stale URL degrades to the page', () => {
+        renderProbe(`${PAGE_URL}?rhs=nonsense`);
+
+        expect(state()).toBe('closed');
+    });
+
+    it('opens and closes on the same control', () => {
+        renderProbe();
+
+        press('toggle info');
+        expect(state()).toBe('info:root');
+
+        press('toggle info');
+        expect(state()).toBe('closed');
+    });
+
+    it('swaps panels rather than stacking them', () => {
+        renderProbe();
+
+        press('toggle info');
+        press('toggle comments');
+
+        expect(state()).toBe('comments:root');
+    });
+
+    it('drops the sub-view when the panel closes', () => {
+        const {history} = renderProbe();
+
+        press('open members');
+        press('close');
+
+        expect(history.location.search).toBe('');
+    });
+
+    // Back should leave the page, not walk back through every panel the reader
+    // opened on the way — so each change replaces the entry instead of pushing one.
+    it('replaces the history entry instead of pushing one', () => {
+        const {history} = renderProbe();
+        const before = history.length;
+
+        press('toggle info');
+        press('open members');
+        press('close');
+
+        expect(history.length).toBe(before);
+        expect(history.location.pathname).toBe(PAGE_URL);
+    });
+
+    // Edit mode is a query too, and toggling a panel must not drop the editor.
+    it('leaves other queries alone', () => {
+        const {history} = renderProbe(`${PAGE_URL}?edit=1`);
+
+        press('toggle info');
+        expect(history.location.search).toBe('?edit=1&rhs=info');
+
+        press('toggle info');
+        expect(history.location.search).toBe('?edit=1');
+    });
+});
diff --git a/webapp/src/hooks/rhs.ts b/webapp/src/hooks/rhs.ts
new file mode 100644
index 0000000..7f6c9fb
--- /dev/null
+++ b/webapp/src/hooks/rhs.ts
@@ -0,0 +1,71 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useCallback} from 'react';
+import {useHistory, useLocation} from 'react-router-dom';
+import {RHS_QUERY, RHS_VIEW_QUERY} from 'routing/paths';
+import {withQuery} from 'routing/query';
+
+export const RHS_IDS = ['info', 'comments'] as const;
+
+export type RhsId = typeof RHS_IDS[number];
+
+export type Rhs = {
+    id: RhsId;
+
+    /**
+     * The panel's own screen, when it has more than one. Left to the panel to
+     * interpret — this hook only carries it in the URL.
+     */
+    view?: string;
+};
+
+const asRhsId = (value: string | null): RhsId | undefined =>
+    RHS_IDS.find((id) => id === value);
+
+/**
+ * Which right-hand panel is open, from the URL, plus the openers and closers.
+ *
+ * Every write replaces the history entry instead of pushing one: showing a panel
+ * alongside the page is not a move to somewhere else, and pushing would make Back
+ * mean "hide the panel" — one Back per open/close, before the user gets out of the
+ * page they were reading. Replacing keeps the panel in the URL (so it survives a
+ * reload and can be linked) without laying down a trail.
+ *
+ * An unrecognized `?rhs=` value reads as closed, so a stale or hand-edited URL
+ * degrades to the page on its own.
+ */
+export function useRhs() {
+    const history = useHistory();
+    const {pathname, search} = useLocation();
+
+    const params = new URLSearchParams(search);
+    const id = asRhsId(params.get(RHS_QUERY));
+    const view = params.get(RHS_VIEW_QUERY) ?? undefined;
+    const rhs: Rhs | null = id ? {id, view} : null;
+
+    const setRhs = useCallback((next: Rhs | null) => {
+        history.replace(withQuery(pathname, search, (params) => {
+            if (next) {
+                params.set(RHS_QUERY, next.id);
+            } else {
+                params.delete(RHS_QUERY);
+            }
+            if (next?.view) {
+                params.set(RHS_VIEW_QUERY, next.view);
+            } else {
+                params.delete(RHS_VIEW_QUERY);
+            }
+        }));
+    }, [history, pathname, search]);
+
+    const openRhs = useCallback((nextId: RhsId, nextView?: string) => setRhs({id: nextId, view: nextView}), [setRhs]);
+
+    const closeRhs = useCallback(() => setRhs(null), [setRhs]);
+
+    // Re-pressing the control that opened a panel closes it; pressing another
+    // control swaps to that panel, since only one column is on screen at a time.
+    const toggleRhs = useCallback((nextId: RhsId) => setRhs(id === nextId ? null : {id: nextId}), [setRhs, id]);
+
+    return {rhs, openRhs, closeRhs, toggleRhs};
+}
diff --git a/webapp/src/routing/paths.ts b/webapp/src/routing/paths.ts
index eb2b166..93f8156 100644
--- a/webapp/src/routing/paths.ts
+++ b/webapp/src/routing/paths.ts
@@ -65,6 +65,12 @@ export const draftPath = (teamName: string, spaceId: string, pageId: string): st
 // published version yet.
 export const EDIT_QUERY = 'edit';
 
+// Which right-hand panel is open, and which of its screens. A query for the same
+// reason edit mode is one: the panel is a view of the routed page rather than a
+// place of its own, so the path keeps naming the page.
+export const RHS_QUERY = 'rhs';
+export const RHS_VIEW_QUERY = 'rhsView';
+
 export const editPagePath = (teamName: string, spaceId: string, pageId: string): string =>
     `${pagePath(teamName, spaceId, pageId)}?${EDIT_QUERY}=1`;
 
diff --git a/webapp/src/routing/query.ts b/webapp/src/routing/query.ts
new file mode 100644
index 0000000..800468d
--- /dev/null
+++ b/webapp/src/routing/query.ts
@@ -0,0 +1,17 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+/**
+ * The current location with its query edited in place: `mutate` receives the
+ * existing params, so a caller changing one key leaves the others alone. Docs
+ * carries several independent view states in the query (edit mode, the open
+ * right-hand panel, fullscreen), and rebuilding the query from scratch would drop
+ * whichever ones the caller didn't know about.
+ */
+export const withQuery = (pathname: string, search: string, mutate: (params: URLSearchParams) => void): string => {
+    const params = new URLSearchParams(search);
+    mutate(params);
+
+    const query = params.toString();
+    return query ? `${pathname}?${query}` : pathname;
+};

From c8496a985c477b916a14064acd495b9dcab80276 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Wed, 5 Aug 2026 17:29:17 -0500
Subject: [PATCH 68/68] feat(docs): add a fullscreen mode for the page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Expand now hides the spaces sidebar and the space header grows an
"All spaces" control in its place, per the design.

The two ends of this sit four components apart with nothing to share:
the sidebar belongs to the product root, the control to the page header.
So the mode travels in the URL like edit mode and the open panel, and
both ends read useFullscreen instead of a flag threaded through
DocsMainContent and SpaceView. Toggling replaces the history entry —
Back should leave the page, not undo a resize of the view.

"All spaces" reuses goHome, whose bare path drops the query, so leaving
fullscreen is part of going there. That one pushes: it goes somewhere.

Expand's label switches with the mode, so both descriptors are hoisted
to defineMessage — a bare object inside a conditional isn't statically
analyzable and extraction missed both.

Context: mini-spike from Figma node 4526-68777. Two open questions in
the branch notes: the control is in the space header (top row) rather
than the page header, and fullscreen resets on navigation between pages
since page links carry no query.
---
 webapp/i18n/en.json                           |  2 +
 webapp/src/components/docs_root/docs_root.tsx | 47 +++++++-----
 .../space_view/page_header.test.tsx           | 27 +++++++
 .../src/components/space_view/page_header.tsx | 28 +++++--
 .../space_view/space_header.test.tsx          | 68 +++++++++++++++++
 .../components/space_view/space_header.tsx    | 19 +++++
 webapp/src/hooks/fullscreen.test.tsx          | 74 +++++++++++++++++++
 webapp/src/hooks/fullscreen.ts                | 36 +++++++++
 webapp/src/routing/paths.ts                   |  6 ++
 9 files changed, 280 insertions(+), 27 deletions(-)
 create mode 100644 webapp/src/components/space_view/space_header.test.tsx
 create mode 100644 webapp/src/hooks/fullscreen.test.tsx
 create mode 100644 webapp/src/hooks/fullscreen.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 60b5b4e..bb996f1 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -165,11 +165,13 @@
   "docs.sidebar.team.members": "Manage members",
   "docs.sidebar.team.menu": "Manage {teamName}",
   "docs.sidebar.team.settings": "Team settings",
+  "docs.space.allSpaces": "All spaces",
   "docs.space.close": "Close",
   "docs.space.comments": "Comments",
   "docs.space.descriptionPlaceholder": "Add a space description here — just a brief summary of the purpose for this space.",
   "docs.space.details": "Space details",
   "docs.space.edit": "Edit",
+  "docs.space.exitFullscreen": "Exit fullscreen",
   "docs.space.expand": "Expand",
   "docs.space.favorite": "Favorite this space",
   "docs.space.favoritePartial": "Favorite this space (some pages are favorited)",
diff --git a/webapp/src/components/docs_root/docs_root.tsx b/webapp/src/components/docs_root/docs_root.tsx
index ca5da3d..04b68db 100644
--- a/webapp/src/components/docs_root/docs_root.tsx
+++ b/webapp/src/components/docs_root/docs_root.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {useBootstrapDocs} from 'hooks/bootstrap';
+import {useFullscreen} from 'hooks/fullscreen';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useSidebarWidth} from 'hooks/sidebar_width';
 import {useRecordSpaceView} from 'hooks/spaces';
@@ -35,6 +36,10 @@ const DocsRoot = () => {
     const {spaceId} = useDocsNavigation();
     const {width, setWidth, commitWidth} = useSidebarWidth('spaces', DEFAULT_SPACES_WIDTH);
 
+    // Fullscreen gives the page the window by dropping this column; the space header
+    // grows a "Back to all spaces" control to stand in for it.
+    const {fullscreen} = useFullscreen();
+
     useRecordSpaceView(spaceId);
 
     const [switcherOpen, setSwitcherOpen] = useState(false);
@@ -53,26 +58,28 @@ const DocsRoot = () => {
 
     return (
         <div className={styles.root}>
-            <div
-                className={styles.sidebar}
-                style={{width}}
-            >
-                <SpacesSidebar
-                    onOpenSwitcher={openSwitcher}
-                    onCreateSpace={openCreateSpace}
-                />
-                <ResizableDivider
-                    ariaLabel={formatMessage({id: 'docs.sidebar.resizeSpaces', defaultMessage: 'Resize spaces sidebar'})}
-                    side='left'
-                    scrollbarClearance={SPACES_SCROLLBAR_CLEARANCE}
-                    width={width}
-                    minWidth={MIN_SPACES_WIDTH}
-                    maxWidth={MAX_SPACES_WIDTH}
-                    defaultWidth={DEFAULT_SPACES_WIDTH}
-                    onResize={setWidth}
-                    onResizeEnd={commitWidth}
-                />
-            </div>
+            {!fullscreen && (
+                <div
+                    className={styles.sidebar}
+                    style={{width}}
+                >
+                    <SpacesSidebar
+                        onOpenSwitcher={openSwitcher}
+                        onCreateSpace={openCreateSpace}
+                    />
+                    <ResizableDivider
+                        ariaLabel={formatMessage({id: 'docs.sidebar.resizeSpaces', defaultMessage: 'Resize spaces sidebar'})}
+                        side='left'
+                        scrollbarClearance={SPACES_SCROLLBAR_CLEARANCE}
+                        width={width}
+                        minWidth={MIN_SPACES_WIDTH}
+                        maxWidth={MAX_SPACES_WIDTH}
+                        defaultWidth={DEFAULT_SPACES_WIDTH}
+                        onResize={setWidth}
+                        onResizeEnd={commitWidth}
+                    />
+                </div>
+            )}
             <main className={styles.main}>
                 <DocsMainContent
                     onCreateSpace={openCreateSpace}
diff --git a/webapp/src/components/space_view/page_header.test.tsx b/webapp/src/components/space_view/page_header.test.tsx
index 0dfceb4..68395a6 100644
--- a/webapp/src/components/space_view/page_header.test.tsx
+++ b/webapp/src/components/space_view/page_header.test.tsx
@@ -163,3 +163,30 @@ describe('PageHeader comments control', () => {
     });
 });
 
+// The control lives here while the sidebar it hides belongs to the product root, so
+// the mode travels in the URL — these assert this end of it.
+describe('PageHeader fullscreen control', () => {
+    it('offers fullscreen while windowed', () => {
+        renderHeader();
+
+        expect(screen.getByRole('button', {name: 'Expand'})).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('offers the way out while fullscreen', () => {
+        renderHeader({}, `${PAGE_URL}?fs=1`);
+
+        const control = screen.getByRole('button', {name: 'Exit fullscreen'});
+        expect(control).toHaveAttribute('aria-pressed', 'true');
+        expect(screen.queryByRole('button', {name: 'Expand'})).not.toBeInTheDocument();
+    });
+
+    it('enters fullscreen without pushing a history entry', () => {
+        const {history} = renderHeader();
+        const before = history.length;
+
+        fireEvent.click(screen.getByRole('button', {name: 'Expand'}));
+
+        expect(history.location.search).toBe('?fs=1');
+        expect(history.length).toBe(before);
+    });
+});
diff --git a/webapp/src/components/space_view/page_header.tsx b/webapp/src/components/space_view/page_header.tsx
index 45c57e4..dcc2301 100644
--- a/webapp/src/components/space_view/page_header.tsx
+++ b/webapp/src/components/space_view/page_header.tsx
@@ -2,13 +2,15 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
+import {useFullscreen} from 'hooks/fullscreen';
 import {useCreateRootPage} from 'hooks/pages';
 import {useSidebarWidth} from 'hooks/sidebar_width';
 import React, {useState} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 import {Timestamp} from 'webapp_globals';
 import type {TimestampUnit} from 'webapp_globals';
 
+import ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';
 import ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';
 import CheckIcon from '@mattermost/compass-icons/components/check';
 import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';
@@ -42,6 +44,12 @@ export const PAGES_KEYBOARD_HELP_ID = 'docsPageTreeHelp';
 // from the sidebar width to land on the sidebar's right edge.
 const BAR_INLINE_START_PADDING = 8;
 
+// Descriptors rather than inline objects: the expand control picks between them, and
+// a bare object inside a conditional isn't statically analyzable, so extraction would
+// miss both.
+const EXPAND_LABEL = defineMessage({id: 'docs.space.expand', defaultMessage: 'Expand'});
+const EXIT_FULLSCREEN_LABEL = defineMessage({id: 'docs.space.exitFullscreen', defaultMessage: 'Exit fullscreen'});
+
 // Relative "Updated …" buckets for the host Timestamp.
 const UPDATED_TIME_SPEC: TimestampUnit[] = [
     ['minute', -59],
@@ -72,12 +80,16 @@ type Props = {
     onPublish: () => void;
 };
 
-// Overflow and expand are visual scaffolding wired in later passes; the pages toggle
-// drives the page tree panel, Comments opens its right-hand panel, and Edit/Close
-// plus Publish/Update are live.
+// Overflow is visual scaffolding wired in a later pass; the pages toggle drives the
+// page tree panel, Comments opens its right-hand panel, expand goes fullscreen, and
+// Edit/Close plus Publish/Update are live.
 const PageHeader = ({space, page, draft, treeOpen, editing, commentsOpen, onTogglePages, onToggleComments, onToggleEdit, onPublish}: Props) => {
     const {formatMessage} = useIntl();
     const createRootPage = useCreateRootPage(space.id);
+
+    // Read here rather than passed in: the sidebar it hides belongs to the product
+    // root, which shares no state with this header — see useFullscreen.
+    const {fullscreen, toggleFullscreen} = useFullscreen();
     const [publishing, setPublishing] = useState(false);
 
     // Publishing navigates on success, so the guard is against a second click during
@@ -98,7 +110,7 @@ const PageHeader = ({space, page, draft, treeOpen, editing, commentsOpen, onTogg
     const addPageLabel = formatMessage({id: 'docs.pageTree.add', defaultMessage: 'Add page'});
     const commentsLabel = formatMessage({id: 'docs.space.comments', defaultMessage: 'Comments'});
     const moreLabel = formatMessage({id: 'docs.space.more', defaultMessage: 'More actions'});
-    const expandLabel = formatMessage({id: 'docs.space.expand', defaultMessage: 'Expand'});
+    const expandLabel = formatMessage(fullscreen ? EXIT_FULLSCREEN_LABEL : EXPAND_LABEL);
     const updateLabel = formatMessage({id: 'docs.space.update', defaultMessage: 'Update'});
     const noChangesLabel = formatMessage({id: 'docs.space.noUnpublishedChanges', defaultMessage: 'No unpublished changes'});
 
@@ -279,9 +291,11 @@ const PageHeader = ({space, page, draft, treeOpen, editing, commentsOpen, onTogg
                         <Button
                             emphasis='quaternary'
                             size='sm'
-                            className='btn-icon'
+                            className={classNames('btn-icon', {active: fullscreen})}
                             tooltip={expandLabel}
-                            leadingIcon={<ArrowExpandIcon size={18}/>}
+                            aria-pressed={fullscreen}
+                            leadingIcon={fullscreen ? <ArrowCollapseIcon size={18}/> : <ArrowExpandIcon size={18}/>}
+                            onClick={toggleFullscreen}
                         />
                     </>
                 )}
diff --git a/webapp/src/components/space_view/space_header.test.tsx b/webapp/src/components/space_view/space_header.test.tsx
new file mode 100644
index 0000000..438a5f9
--- /dev/null
+++ b/webapp/src/components/space_view/space_header.test.tsx
@@ -0,0 +1,68 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import {makeSpace} from 'store/test_fixtures';
+
+import SpaceHeader from './space_header';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+// Stubbed at the hook boundary: mattermost-redux's preferences actions are published
+// as ESM that jest doesn't transform.
+jest.mock('hooks/favorites', () => ({
+    useSpaceFavoriteState: () => 'off',
+    useToggleFavorite: () => jest.fn(),
+}));
+
+jest.mock('hooks/leave_space', () => ({useLeaveSpace: () => jest.fn()}));
+
+// Both reach mattermost-redux's user actions, which ship as untransformed ESM. The
+// header only needs them as menu destinations, which the menu isn't opened to test.
+jest.mock('components/share_space_modal/share_space_modal', () => () => null);
+jest.mock('components/space_settings_modal/space_settings_modal', () => () => null);
+jest.mock('store/actions', () => ({deleteSpace: () => async () => {}}));
+
+const SPACE = makeSpace('eng', 'Engineering');
+const PAGE_URL = '/myteam/spaces/eng/runbook';
+
+const renderHeader = (route = PAGE_URL) =>
+    renderWithContext(
+        <SpaceHeader
+            space={SPACE}
+            memberCount={3}
+            infoOpen={false}
+            onToggleInfo={jest.fn()}
+            onShowMembers={jest.fn()}
+        />,
+        {route},
+    );
+
+// In fullscreen the spaces sidebar is gone, so the header carries the only way back
+// to the list.
+describe('SpaceHeader all-spaces control', () => {
+    it('offers no back control while the sidebar is showing', () => {
+        renderHeader();
+
+        expect(screen.queryByRole('button', {name: 'All spaces'})).not.toBeInTheDocument();
+    });
+
+    it('offers it in fullscreen', () => {
+        renderHeader(`${PAGE_URL}?fs=1`);
+
+        expect(screen.getByRole('button', {name: 'All spaces'})).toBeInTheDocument();
+    });
+
+    // Fullscreen is a query on the page URL, so leaving for the product home drops
+    // it — the list of spaces is not something fullscreen can show.
+    it('leaves fullscreen behind on the way', () => {
+        const {history} = renderHeader(`${PAGE_URL}?fs=1`);
+
+        fireEvent.click(screen.getByRole('button', {name: 'All spaces'}));
+
+        expect(history.location.pathname).toBe('/myteam/spaces');
+        expect(history.location.search).toBe('');
+    });
+});
diff --git a/webapp/src/components/space_view/space_header.tsx b/webapp/src/components/space_view/space_header.tsx
index 0ca5aaf..c4d82f4 100644
--- a/webapp/src/components/space_view/space_header.tsx
+++ b/webapp/src/components/space_view/space_header.tsx
@@ -3,6 +3,7 @@
 
 import classNames from 'classnames';
 import {useSpaceFavoriteState, useToggleFavorite} from 'hooks/favorites';
+import {useFullscreen} from 'hooks/fullscreen';
 import {useLeaveSpace} from 'hooks/leave_space';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useAppDispatch} from 'hooks/redux';
@@ -13,6 +14,7 @@ import {SpaceIcon} from 'utils/space_icon';
 
 import AccountMultipleOutlineIcon from '@mattermost/compass-icons/components/account-multiple-outline';
 import ArchiveOutlineIcon from '@mattermost/compass-icons/components/archive-outline';
+import ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
 import CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';
 import ExitToAppIcon from '@mattermost/compass-icons/components/exit-to-app';
@@ -53,6 +55,7 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
     const dispatch = useAppDispatch();
     const {paths, spaceId, goHome} = useDocsNavigation();
     const {canManageMembers} = useSpacePermissions(space.id);
+    const {fullscreen} = useFullscreen();
     const leaveThisSpace = useLeaveSpace(space);
     const favoriteState = useSpaceFavoriteState(space.id);
     const toggleFavorite = useToggleFavorite();
@@ -188,6 +191,22 @@ const SpaceHeader = ({space, memberCount, infoOpen, onToggleInfo, onShowMembers}
     // itself is named by `ariaLabel` on the popup.
     const left = (
         <div className={styles.leftCluster}>
+            {fullscreen && (
+
+                // Stands in for the hidden spaces sidebar: in fullscreen this is the
+                // only way back to the list.
+                <Button
+                    emphasis='tertiary'
+                    size='sm'
+                    leadingIcon={<ArrowLeftIcon size={16}/>}
+                    onClick={goHome}
+                >
+                    <FormattedMessage
+                        id='docs.space.allSpaces'
+                        defaultMessage='All spaces'
+                    />
+                </Button>
+            )}
             <Button
                 emphasis='quaternary'
                 size='sm'
diff --git a/webapp/src/hooks/fullscreen.test.tsx b/webapp/src/hooks/fullscreen.test.tsx
new file mode 100644
index 0000000..a441f39
--- /dev/null
+++ b/webapp/src/hooks/fullscreen.test.tsx
@@ -0,0 +1,74 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+
+import {useFullscreen} from './fullscreen';
+
+import {renderWithContext} from '../../tests/react_testing_utils';
+
+const PAGE_URL = '/myteam/spaces/eng/runbook';
+
+const Probe = () => {
+    const {fullscreen, toggleFullscreen} = useFullscreen();
+
+    return (
+        <>
+            <span data-testid='state'>{fullscreen ? 'fullscreen' : 'windowed'}</span>
+            <button
+                type='button'
+                onClick={toggleFullscreen}
+            >{'toggle'}</button>
+        </>
+    );
+};
+
+const renderProbe = (route = PAGE_URL) => renderWithContext(<Probe/>, {route});
+
+const state = () => screen.getByTestId('state').textContent;
+
+const press = (name: string) => fireEvent.click(screen.getByRole('button', {name}));
+
+describe('useFullscreen', () => {
+    it('reads the mode out of the URL', () => {
+        renderProbe(`${PAGE_URL}?fs=1`);
+
+        expect(state()).toBe('fullscreen');
+    });
+
+    it('starts windowed', () => {
+        renderProbe();
+
+        expect(state()).toBe('windowed');
+    });
+
+    it('toggles both ways', () => {
+        renderProbe();
+
+        press('toggle');
+        expect(state()).toBe('fullscreen');
+
+        press('toggle');
+        expect(state()).toBe('windowed');
+    });
+
+    // Back should leave the page, not undo a resize of the view.
+    it('replaces the history entry instead of pushing one', () => {
+        const {history} = renderProbe();
+        const before = history.length;
+
+        press('toggle');
+
+        expect(history.length).toBe(before);
+        expect(history.location.search).toBe('?fs=1');
+    });
+
+    it('leaves other queries alone', () => {
+        const {history} = renderProbe(`${PAGE_URL}?rhs=comments`);
+
+        press('toggle');
+
+        expect(history.location.search).toBe('?rhs=comments&fs=1');
+    });
+});
diff --git a/webapp/src/hooks/fullscreen.ts b/webapp/src/hooks/fullscreen.ts
new file mode 100644
index 0000000..8484ce7
--- /dev/null
+++ b/webapp/src/hooks/fullscreen.ts
@@ -0,0 +1,36 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useCallback} from 'react';
+import {useHistory, useLocation} from 'react-router-dom';
+import {FULLSCREEN_QUERY} from 'routing/paths';
+import {withQuery} from 'routing/query';
+
+/**
+ * Fullscreen: the spaces sidebar is hidden and the page has the window. Read from
+ * the URL, like edit mode and the right-hand panel — the control that toggles it
+ * sits in the page header while the sidebar it hides belongs to the product root,
+ * and the two share nothing else.
+ *
+ * Toggling replaces the history entry rather than pushing one, so Back leaves the
+ * page instead of stepping back through however many times the reader resized their
+ * view.
+ */
+export function useFullscreen() {
+    const history = useHistory();
+    const {pathname, search} = useLocation();
+
+    const fullscreen = new URLSearchParams(search).get(FULLSCREEN_QUERY) === '1';
+
+    const toggleFullscreen = useCallback(() => {
+        history.replace(withQuery(pathname, search, (params) => {
+            if (params.get(FULLSCREEN_QUERY) === '1') {
+                params.delete(FULLSCREEN_QUERY);
+            } else {
+                params.set(FULLSCREEN_QUERY, '1');
+            }
+        }));
+    }, [history, pathname, search]);
+
+    return {fullscreen, toggleFullscreen};
+}
diff --git a/webapp/src/routing/paths.ts b/webapp/src/routing/paths.ts
index 93f8156..8b4b586 100644
--- a/webapp/src/routing/paths.ts
+++ b/webapp/src/routing/paths.ts
@@ -71,6 +71,12 @@ export const EDIT_QUERY = 'edit';
 export const RHS_QUERY = 'rhs';
 export const RHS_VIEW_QUERY = 'rhsView';
 
+// Fullscreen hides the spaces sidebar to give the page the window. A query for the
+// same reason as the others, and because the two ends of it — the sidebar at the
+// product root and the control in the page header — have no state to share
+// otherwise.
+export const FULLSCREEN_QUERY = 'fs';
+
 export const editPagePath = (teamName: string, spaceId: string, pageId: string): string =>
     `${pagePath(teamName, spaceId, pageId)}?${EDIT_QUERY}=1`;