diff --git a/app/layouts/PageLayout.tsx b/app/layouts/PageLayout.tsx
index 6e9c62d6b..1405e473d 100644
--- a/app/layouts/PageLayout.tsx
+++ b/app/layouts/PageLayout.tsx
@@ -133,15 +133,10 @@ function PageLayoutInner({
             {children}
           </div>
         ) : (
-          /* Scrollable content area.
-             Mobile: top padding clears the fixed top bar (needed so content
-             can scroll under the hide-on-scroll bar).
-             Tablet+: top margin instead, so the scrollport starts below the bar.
-             When the EndowmentPromoBanner is visible above the TopBar on mobile
-             we add extra top padding to clear the banner + topbar stack.
-             The banner itself is hidden at >= 768px (tablet:!hidden) so the
-             offset is reset by the inner media query below.
-             Bottom padding on mobile clears the fixed MobileBottomNav. */
+          /* The scrollport. Padding clears the fixed top bar on phones, where it
+             hides on scroll; a margin does from the tablet breakpoint up. The
+             `page-layout-*` classes reserve room for the promo banner and the
+             bottom nav where those show. */
           <div
             ref={scrollContainerRef}
             className={cn(
diff --git a/app/layouts/TopBar.tsx b/app/layouts/TopBar.tsx
index 3780fd1e6..cc7d8ca4d 100644
--- a/app/layouts/TopBar.tsx
+++ b/app/layouts/TopBar.tsx
@@ -48,8 +48,13 @@ export function TopBar({ onMenuClick }: TopBarProps) {
   // default breadcrumb.
   const topBarSlot = useTopBarSlot();
   const leftSlot = topBarSlot?.leftSlot;
+  // Or keep the back arrow and name what the page has open instead of the page.
+  const openTitle = topBarSlot?.title ?? null;
+  const leading = topBarSlot?.leading;
 
-  const pageInfo = getPageInfo(pathname);
+  const routePageInfo = getPageInfo(pathname);
+  const pageInfo =
+    routePageInfo && openTitle != null ? { ...routePageInfo, title: openTitle } : routePageInfo;
   const showBackButton = pageInfo && !isRootNavigationPage(pathname);
 
   const profilePercent = useCallback(() => {
@@ -105,10 +110,14 @@ export function TopBar({ onMenuClick }: TopBarProps) {
 
                 {showBackButton && <TopBarBackButton onClick={goBack} variant="desktop" />}
 
+                {leading}
+
                 {pageInfo && (
                   <TopBarBreadcrumb
                     pageInfo={showTopBarFundTabs ? { ...pageInfo, title: 'Fund' } : pageInfo}
                     variant="desktop"
+                    truncateTitle={openTitle != null}
+                    size={openTitle != null ? 'md' : 'lg'}
                   />
                 )}
               </>
diff --git a/app/layouts/topbar/TopBarBreadcrumb.tsx b/app/layouts/topbar/TopBarBreadcrumb.tsx
index 143cef289..825c17943 100644
--- a/app/layouts/topbar/TopBarBreadcrumb.tsx
+++ b/app/layouts/topbar/TopBarBreadcrumb.tsx
@@ -6,12 +6,15 @@ interface TopBarBreadcrumbProps {
   variant: 'mobile' | 'desktop';
   /** Ellipsize a long title so sibling controls (e.g. sticky tab pills) stay visible. */
   truncateTitle?: boolean;
+  /** `lg` (26px) for a page's own name; `md` (20px) for the longer title of what a page has open. */
+  size?: 'lg' | 'md';
 }
 
 export const TopBarBreadcrumb = ({
   pageInfo,
   variant,
   truncateTitle = false,
+  size = 'lg',
 }: TopBarBreadcrumbProps) => {
   const isMobile = variant === 'mobile';
 
@@ -26,7 +29,11 @@ export const TopBarBreadcrumb = ({
         truncateTitle ? 'min-w-0 truncate' : 'flex-shrink-0'
       );
 
-  const titleStyle = isMobile ? undefined : { fontSize: '26px', letterSpacing: '-0.5px' };
+  const desktopTitleStyle =
+    size === 'md'
+      ? { fontSize: '20px', letterSpacing: '-0.3px' }
+      : { fontSize: '26px', letterSpacing: '-0.5px' };
+  const titleStyle = isMobile ? undefined : desktopTitleStyle;
 
   return (
     <div className={containerClass}>
diff --git a/components/AIMode/WorkspacePage.tsx b/components/AIMode/WorkspacePage.tsx
index c64fbb457..582e5fc2c 100644
--- a/components/AIMode/WorkspacePage.tsx
+++ b/components/AIMode/WorkspacePage.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { PanelRight } from 'lucide-react';
+import { PanelRightOpen } from 'lucide-react';
 import { PageLayout } from '@/app/layouts/PageLayout';
 import { cn } from '@/utils/styles';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
@@ -12,8 +12,8 @@ import { DocumentCard } from './chat/DocumentCard';
 import { conversationTitleFor } from './chat/conversationTitle';
 import { DocumentPane, type DocumentPaneView } from './document/DocumentPane';
 import { useAIModeDocument } from './document/useAIModeDocument';
-import { AIModeHeader } from './shell/AIModeHeader';
 import { WorkspacePanes } from './shell/WorkspacePanes';
+import { WorkspaceTopBar } from './shell/WorkspaceTopBar';
 import { WorkspaceSidebar } from './sidebar/WorkspaceSidebar';
 import { useAIModeChat } from './useAIModeChat';
 import { newConversationTitle } from './copy';
@@ -21,8 +21,6 @@ import { layoutFor } from './workspaceUrl';
 
 const CHAT_MIN_WIDTH = 360;
 const DOCUMENT_MIN_WIDTH = 420;
-/** The details form needs more room than the document: authors, image, funding fields. */
-const DETAILS_MIN_WIDTH = 560;
 /** Share of the viewport the document opens at before the user drags it. */
 const DOCUMENT_DEFAULT_SHARE = 0.55;
 
@@ -66,7 +64,7 @@ function Workspace() {
   // being an icon rail (Tailwind's `sidebar-compact`). Below that they wait
   // behind a button: a panel over the panes, or on a phone a screen of their own.
   const listsInColumn = useMediaQuery('(min-width: 1240px)') === true;
-  // Tailwind's `tablet` breakpoint; the strip and the side-by-side panes only exist from it up.
+  // Tailwind's `tablet` breakpoint; the side-by-side panes only exist from it up.
   const isBelowTablet = useMediaQuery('(max-width: 767px)') === true;
   const [listOpen, setListOpen] = useState(false);
   const closeList = useCallback(() => setListOpen(false), []);
@@ -84,13 +82,12 @@ function Workspace() {
   // ---- pane widths: the side pane drags, the main pane takes the rest ----
   const [panesEl, setPanesEl] = useState<HTMLDivElement | null>(null);
   const panesWidth = useElementWidth(panesEl);
-  // Document or details in the document pane; details wants a wider floor.
+  // Document or details in the phone's drawer; the column only shows the document.
   const [documentView, setDocumentView] = useState<DocumentPaneView>('document');
-  const documentMinWidth = documentView === 'details' ? DETAILS_MIN_WIDTH : DOCUMENT_MIN_WIDTH;
   // The side pane is the document (chat first) or the chat (document first);
   // it may grow until the main pane is down to its own minimum column.
   const sideIsDocument = layout === 'chat';
-  const sideMinWidth = sideIsDocument ? documentMinWidth : CHAT_MIN_WIDTH;
+  const sideMinWidth = sideIsDocument ? DOCUMENT_MIN_WIDTH : CHAT_MIN_WIDTH;
   const sideMaxWidth = Math.max(
     sideMinWidth,
     panesWidth - (sideIsDocument ? CHAT_MIN_WIDTH : DOCUMENT_MIN_WIDTH)
@@ -121,10 +118,16 @@ function Workspace() {
   const openDocument = useCallback(() => setDocumentOpen(true), []);
   const closeDocument = useCallback(() => setDocumentOpen(false), []);
   const showDocument = noteId != null && documentOpen;
-  const documentTitle = doc.content?.title?.trim() || state.note?.title?.trim() || 'Document';
-  // The strip names what is open: the conversation when the chat is the main
-  // pane, the document when it is, and the new-conversation screen by what it
-  // is for — an RFP or a proposal.
+  // The Drafts list follows the open document's title as it is renamed.
+  const docTitle = doc.title;
+  const openNote = useMemo(
+    () => (noteId != null && docTitle ? { id: noteId, title: docTitle } : null),
+    [noteId, docTitle]
+  );
+  const documentTitle = doc.title || 'Document';
+  // The top bar names what is open: the conversation when the chat is the
+  // main pane, the document when it is, and the new-conversation screen by
+  // what it is for — an RFP or a proposal.
   const { title: conversationTitle } = conversationTitleFor(state);
   const headerTitle =
     layout === 'document'
@@ -133,10 +136,6 @@ function Workspace() {
         ? conversationTitle
         : newConversationTitle(state.intent);
 
-  // The document column puts its publish controls up in the strip, where
-  // they read as the workspace's, not the pane's. It renders into this slot.
-  const [publishControlsSlot, setPublishControlsSlot] = useState<HTMLDivElement | null>(null);
-
   // The turn that created the document, for seating its card in the transcript.
   const documentCardExecutionId = useMemo(() => {
     if (noteId == null) return null;
@@ -170,7 +169,6 @@ function Workspace() {
       view={documentView}
       onViewChange={setDocumentView}
       presentation={presentation}
-      publishControlsSlot={presentation === 'pane' ? publishControlsSlot : null}
       readOnly={presentation === 'drawer'}
       className={presentation === 'drawer' ? '-mx-4 -mt-2' : undefined}
     />
@@ -182,34 +180,35 @@ function Workspace() {
       leftSidebarContent={
         listsInColumn ? (
           <div className="workspace-fade-in h-full">
-            <WorkspaceSidebar state={state} />
+            <WorkspaceSidebar state={state} openNote={openNote} />
           </div>
         ) : null
       }
     >
       <div ref={setPanesEl} className="workspace-fade-in flex min-h-0 flex-1 flex-col bg-gray-50">
-        {!isBelowTablet && (
-          <AIModeHeader
-            title={headerTitle}
-            publishControlsRef={setPublishControlsSlot}
-            listOpen={listOpen}
-            onToggleList={listsInColumn ? undefined : toggleList}
-          />
-        )}
+        <WorkspaceTopBar
+          title={headerTitle}
+          listOpen={listOpen}
+          onToggleList={listsInColumn || isBelowTablet ? undefined : toggleList}
+        />
 
         <WorkspacePanes
           layout={layout}
           isBelowTablet={isBelowTablet}
           sideWidth={{ ...sideWidth, min: sideMinWidth, max: sideMaxWidth }}
-          lists={listsInColumn ? null : <WorkspaceSidebar state={state} onNavigate={closeList} />}
+          lists={
+            listsInColumn ? null : (
+              <WorkspaceSidebar state={state} openNote={openNote} onNavigate={closeList} />
+            )
+          }
           listOpen={listOpen}
           onCloseList={closeList}
           onCloseDocumentDrawer={closeDocument}
           chat={
             <ChatPane
               state={state}
-              // From the tablet breakpoint up the strip names the chat when it is the main pane.
-              showTitle={isBelowTablet || layout !== 'chat'}
+              // The top bar names the chat when it is the main pane.
+              showTitle={layout !== 'chat'}
               onOpenConversations={() => setListOpen(true)}
               documentCard={documentCard}
               documentCardExecutionId={documentCardExecutionId}
@@ -228,7 +227,7 @@ function Workspace() {
                         : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
                     )}
                   >
-                    <PanelRight className="h-4 w-4" aria-hidden="true" />
+                    <PanelRightOpen className="h-4 w-4" aria-hidden="true" />
                   </button>
                 )
               }
diff --git a/components/AIMode/chat/ChatPane.tsx b/components/AIMode/chat/ChatPane.tsx
index 0589581d7..736857486 100644
--- a/components/AIMode/chat/ChatPane.tsx
+++ b/components/AIMode/chat/ChatPane.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { PanelLeft } from 'lucide-react';
+import { PanelLeftOpen } from 'lucide-react';
 import { ChatComposer } from '@/components/AgentChat/ChatComposer';
 import { ChatTranscript } from '@/components/AgentChat/ChatTranscript';
 import { JumpToLatestButton } from '@/components/AgentChat/JumpToLatestButton';
@@ -28,8 +28,8 @@ import { DocumentChatEmptyState } from './DocumentChatEmptyState';
 interface ChatPaneProps {
   readonly state: AIModeChatState;
   /**
-   * Whether the pane's header names the chat. Not where the workspace's strip
-   * above already does: the chat as the main pane, from the tablet breakpoint up.
+   * Whether the pane's header names the chat. Not when the chat is the main
+   * pane: the app's top bar already names it there, at every width.
    */
   readonly showTitle: boolean;
   /** Header controls seated right of the title — the document toggle. */
@@ -161,7 +161,7 @@ export function ChatPane({
             aria-label="Show conversations and documents"
             className="rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 tablet:!hidden"
           >
-            <PanelLeft className="h-4 w-4" />
+            <PanelLeftOpen className="h-4 w-4" />
           </button>
         )}
         {renaming && chatId != null ? (
@@ -176,7 +176,7 @@ export function ChatPane({
             }}
           />
         ) : !showTitle ? (
-          // The strip names it; the header carries only the controls.
+          // The top bar names it; the header carries only the controls.
           <span className="flex-1" />
         ) : titleLoading ? (
           <div className="flex min-w-0 flex-1 items-center" aria-busy="true">
diff --git a/components/AIMode/copy.ts b/components/AIMode/copy.ts
index 5b02eb24f..673ae8bb0 100644
--- a/components/AIMode/copy.ts
+++ b/components/AIMode/copy.ts
@@ -7,9 +7,8 @@ import type { FundingIntent } from '@/components/Funding/fundingDirection';
 export const AI_MODE_NAME = 'Workspace';
 
 /**
- * What the new-conversation screen is called, in the workspace's strip and
- * on a phone in the chat's header: named for what it will produce, not for
- * the chat.
+ * What the new-conversation screen is called, in the app's top bar: named
+ * for what it will produce, not for the chat.
  */
 export const newConversationTitle = (intent: FundingIntent): string =>
   intent === 'fund' ? 'New RFP' : 'New proposal';
diff --git a/components/AIMode/document/DocumentPane.tsx b/components/AIMode/document/DocumentPane.tsx
index 0ce27956f..9f10735a3 100644
--- a/components/AIMode/document/DocumentPane.tsx
+++ b/components/AIMode/document/DocumentPane.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import type { Editor } from '@tiptap/react';
 import { BlockEditorClientWrapper } from '@/components/Editor/components/BlockEditor/components/BlockEditorClientWrapper';
+import { setDocumentTitle } from '@/components/Editor/lib/utils/documentTitle';
 import { NoteReviewBanner } from '@/components/Notebook/NoteReview/NoteReviewBanner';
 import {
   PublishingForm,
@@ -23,11 +23,13 @@ import { DocumentPaneSkeleton } from '@/components/skeletons/AIModeSkeleton';
 import { useUpdateNote } from '@/hooks/useNote';
 import type { AgentChat } from '@/types/agentChat';
 import { cn } from '@/utils/styles';
-import { DetailBlockStrip } from './details/DetailBlockStrip';
+import { Masthead } from './masthead/Masthead';
 import { PublishControls } from './PublishControls';
+import { PublishDialog } from './PublishDialog';
+import { PublishPill } from './PublishPill';
 import type { AIModeDocument } from './useAIModeDocument';
 
-/** The document itself, or the full publishing details form. */
+/** The document itself, or the full publishing details form the phone's drawer still has. */
 export type DocumentPaneView = 'document' | 'details';
 
 /** The page column: shared by the skeleton and the document so they line up. */
@@ -38,26 +40,24 @@ interface DocumentPaneProps {
   readonly document: AIModeDocument;
   /** The open chat, whose activity is one of the review's version signals. */
   readonly chat: AgentChat | null;
+  /** Which of the drawer's two views is showing; the column only has the document. */
   readonly view: DocumentPaneView;
   readonly onViewChange: (view: DocumentPaneView) => void;
   /**
    * A column beside the chat, or the drawer below the tablet breakpoint. The
-   * drawer trades the block strip for a Document | Details switch and keeps
-   * the publish controls with it.
+   * column is only the document: its publishing details head it and a
+   * Publish button floats over it. The drawer has not been redesigned yet,
+   * and keeps a Document | Details switch with its publish controls.
    */
   readonly presentation?: 'pane' | 'drawer';
-  /**
-   * Where the pane places its publish controls when it is a column: an
-   * element in the workspace's strip. The drawer keeps them inline.
-   */
-  readonly publishControlsSlot?: HTMLElement | null;
   /** The editor is never editable — the mobile drawer. */
   readonly readOnly?: boolean;
   readonly className?: string;
 }
 
 /**
- * The right pane: the note the assistant is composing, in the real editor.
+ * The document pane: the note the assistant is composing, in the real editor,
+ * under a masthead that holds what it needs before it can be published.
  * Each version the assistant writes is spliced into the editor as an in-note
  * review (highlighted insertions, struck removals, accept/reject), exactly as
  * in the notebook. The user can edit once the turn has settled; edits
@@ -71,13 +71,15 @@ export function DocumentPane({
   view,
   onViewChange,
   presentation = 'pane',
-  publishControlsSlot = null,
   readOnly = false,
   className,
 }: DocumentPaneProps) {
   const { note, content, loading, error, status, draftText, draftBlocks, phaseLabel } = document;
   const noteId = note?.id ?? null;
   const writing = status === 'drafting' || status === 'working';
+  const isPane = presentation === 'pane';
+  // The column has no details view; a drawer left on Details must not hide it.
+  const showingDocument = isPane || view === 'document';
 
   // ---- the editor, its autosave, and the assistant-version review ----
   const [editor, setEditor] = useState<Editor | null>(null);
@@ -163,32 +165,87 @@ export function DocumentPane({
     status === 'working' && !document.hasWrittenVersion && review.review == null;
 
   const openDetails = useCallback(() => onViewChange('details'), [onViewChange]);
-  const toggleDetails = useCallback(
-    () => onViewChange(view === 'details' ? 'document' : 'details'),
-    [onViewChange, view]
+
+  // The note's title heads the document and is what it is published under.
+  // It is the note's own field, not the document's first heading, which here
+  // is a section; it saves through the note's details writer.
+  const title = document.title;
+
+  // A draft made in the notebook is the exception: its body opens with the
+  // title as a top-level heading, which is where the notebook reads the
+  // title from. The masthead already shows it and the published page drops
+  // that heading, so it is hidden here, and a rename is written into it too
+  // so the two cannot drift apart.
+  const [leadingHeading, setLeadingHeading] = useState<string | null>(null);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) {
+      setLeadingHeading(null);
+      return undefined;
+    }
+    const read = () => {
+      const first = editor.state.doc.firstChild;
+      const isTitleHeading = first?.type.name === 'heading' && first.attrs.level === 1;
+      setLeadingHeading(isTitleHeading ? first.textContent.trim() : null);
+    };
+    read();
+    editor.on('update', read);
+    return () => {
+      editor.off('update', read);
+    };
+  }, [editor]);
+  const bodyOpensWithTitle = title !== '' && leadingHeading === title;
+  const reviewing = review.review != null;
+
+  const renameDocument = document.rename;
+  const rename = useCallback(
+    (next: string) => {
+      renameDocument(next);
+      // Not under the assistant's hands: a write there would make its edit stale.
+      const writeHeading =
+        bodyOpensWithTitle && editor != null && !editor.isDestroyed && !locked && !reviewing;
+      if (!writeHeading) {
+        saveDetailsSoon({ title: next });
+        return;
+      }
+      // The document goes out first and the title only once it has landed.
+      // The API takes them on separate routes, and a title that arrives
+      // while a version is being written leaves the note pointing at the
+      // version before it.
+      setDocumentTitle(editor, next);
+      void saveNoteNow(editor).finally(() => saveDetailsSoon({ title: next }));
+    },
+    [bodyOpensWithTitle, editor, locked, reviewing, renameDocument, saveDetailsSoon, saveNoteNow]
   );
 
+  // The bottom-centre spot is the assistant's first: while it writes, and
+  // while its changes wait to be accepted or rejected, there is no Publish.
+  const showPublish =
+    isPane &&
+    content != null &&
+    !loading &&
+    !writing &&
+    review.review == null &&
+    !editorLostContent;
+
   return (
     <PublishingHostProvider value={publishingHost}>
       {/* The form lives as long as the note does, whichever view is showing:
-          its values are the source of the detail blocks and the publish
-          controls, and remounting it would rehydrate from the note as it was
-          loaded, dropping edits saved since. */}
-      <PublishingFormProvider>
+          its values are the source of the masthead and the publish controls,
+          and remounting it would rehydrate from the note as it was loaded,
+          dropping edits saved since. */}
+      <PublishingFormProvider
+        publishTitle={title}
+        publishConfirmation={isPane ? <PublishDialog title={title} onRename={rename} /> : undefined}
+      >
         <div className={cn('relative flex h-full min-h-0 flex-col bg-white', className)}>
-          {presentation === 'pane' ? (
-            <DetailBlockStrip detailsOpen={view === 'details'} onToggleDetails={toggleDetails} />
-          ) : (
+          {!isPane && (
             <DrawerStrip view={view} onViewChange={onViewChange} onOpenDetails={openDetails} />
           )}
-          {presentation === 'pane' &&
-            publishControlsSlot &&
-            createPortal(<PublishControls onOpenDetails={openDetails} />, publishControlsSlot)}
 
           {/* The document is the pane: no gutter, no card, just the page. The
-          editor stays mounted behind the details view — it holds the review
-          and autosave state, and the form publishes from it. */}
-          <div className={cn('min-h-0 flex-1 overflow-y-auto', view !== 'document' && 'hidden')}>
+          editor stays mounted behind the drawer's details view — it holds the
+          review and autosave state, and the form publishes from it. */}
+          <div className={cn('min-h-0 flex-1 overflow-y-auto', !showingDocument && 'hidden')}>
             <NoteReviewBanner review={review} className="mx-6 mt-4" />
 
             {error && content == null ? (
@@ -205,7 +262,15 @@ export function DocumentPane({
             ) : startingDocument ? (
               <StartingDocument label={phaseLabel} />
             ) : (
-              <article className={cn(DOCUMENT_PAGE_CLASS, 'animate-in fade-in duration-300')}>
+              <article
+                className={cn(
+                  DOCUMENT_PAGE_CLASS,
+                  'animate-in fade-in duration-300',
+                  // Room for the last lines to scroll clear of the floating button.
+                  isPane && '!pb-28'
+                )}
+              >
+                <Masthead title={title} onRename={rename} readOnly={!isPane} />
                 {editorLostContent && (
                   <div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
                     This document couldn’t be displayed here. Open it in the notebook to view it;
@@ -216,7 +281,12 @@ export function DocumentPane({
 
                 {/* Mounted once per note: the editor's content prop is only read on
                 creation, and later versions arrive through the review. */}
-                <div className={writing && !document.hasWrittenVersion ? 'hidden' : undefined}>
+                <div
+                  className={cn(
+                    writing && !document.hasWrittenVersion && 'hidden',
+                    bodyOpensWithTitle && '[&_.ProseMirror>h1:first-of-type]:hidden'
+                  )}
+                >
                   <BlockEditorClientWrapper
                     key={noteId ?? 'none'}
                     content={content.content}
@@ -247,18 +317,18 @@ export function DocumentPane({
             )}
           </div>
 
-          {/* Mounted only while showing: a block's popover registers the same
-              field, and two inputs on one name leave the form reading and
-              writing through whichever attached last — keystrokes in the
-              popover would land in, or be overwritten from, the hidden copy.
-              The values live in the provider, so nothing is lost by unmounting. */}
-          {view === 'details' && (
+          {/* The drawer's full form, mounted only while showing: two inputs
+              registered on one field leave the form reading and writing
+              through whichever attached last, and keystrokes go missing. The
+              masthead beside it is read-only there for the same reason. The
+              values live in the provider, so nothing is lost by unmounting. */}
+          {!isPane && view === 'details' && (
             <div className="min-h-0 flex-1 overflow-y-auto px-6 py-6">
               <PublishingForm showFooter={false} />
             </div>
           )}
 
-          {review.review && view === 'document' && (
+          {review.review && showingDocument && (
             <div className="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-4">
               <NoteReviewControls
                 changeCount={review.review.changeCount}
@@ -267,6 +337,8 @@ export function DocumentPane({
               />
             </div>
           )}
+
+          {showPublish && <PublishPill />}
         </div>
       </PublishingFormProvider>
     </PublishingHostProvider>
diff --git a/components/AIMode/document/MissingDetails.tsx b/components/AIMode/document/MissingDetails.tsx
new file mode 100644
index 000000000..f9435bd3c
--- /dev/null
+++ b/components/AIMode/document/MissingDetails.tsx
@@ -0,0 +1,308 @@
+'use client';
+
+import { useRef, useState, type ReactNode } from 'react';
+import { useWatch } from 'react-hook-form';
+import { MIN_PUBLISH_TITLE_LENGTH } from '@/components/modals/ConfirmPublishModal';
+import { usePublishingController } from '@/components/Notebook/PublishingForm';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AmountEditor } from './masthead/AmountWidget';
+import { useCoverImagePicker } from './masthead/CoverImage';
+import { EDITING_FIELD_CLASS, EDITING_INPUT_CLASS } from './masthead/MastheadLine';
+import { MAX_TITLE_LENGTH, normalizeTitle } from './masthead/MastheadTitle';
+import {
+  detailValue,
+  mastheadWidgetsFor,
+  peopleOf,
+  type MastheadWidgetConfig,
+} from './masthead/mastheadWidgets';
+import { PeopleEditor } from './masthead/PeopleWidget';
+import { TextEditor } from './masthead/TextWidget';
+import { useLeaveToCommit } from './masthead/useLeaveToCommit';
+import type { PublishReadiness } from './masthead/usePublishReadiness';
+
+const TITLE_ROW = 'title';
+
+interface MissingDetailsProps {
+  readonly readiness: PublishReadiness;
+  /** The note's title, and how the dialog changes it when it is too short to publish under. */
+  readonly title: string;
+  readonly onRename: (title: string) => void;
+}
+
+/**
+ * What the document still needs before it can be published, listed in the
+ * publish dialog with a way to give each one right there. The document
+ * itself never marks anything as missing; this is where the user finds out.
+ * The rows alone say it: a row stays once it is filled, showing what was
+ * entered, so the list does not shift under the pointer.
+ */
+export function MissingDetails({ readiness, title, onRename }: MissingDetailsProps) {
+  const { articleType } = usePublishingController();
+  const values = useWatch<PublishingFormData>() as PublishingFormData;
+  const widgets = mastheadWidgetsFor(articleType);
+  const { missing, titleTooShort } = readiness;
+
+  // What was missing when the dialog opened: the rows it keeps.
+  const [rowIds] = useState<readonly string[]>(() => [
+    ...(titleTooShort ? [TITLE_ROW] : []),
+    ...missing.flatMap((field) => widgets.find((widget) => widget.field === field)?.id ?? []),
+  ]);
+  // One editor at a time.
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  if (rowIds.length === 0) return null;
+
+  const configs = rowIds.flatMap((id) => widgets.find((widget) => widget.id === id) ?? []);
+
+  const rowState = (id: string) => ({
+    editing: editingId === id,
+    onEditingChange: (editing: boolean) =>
+      setEditingId((current) => {
+        if (editing) return id;
+        return current === id ? null : current;
+      }),
+  });
+
+  return (
+    <div className="flex flex-col divide-y divide-gray-200 rounded-[10px] border border-gray-200">
+      {rowIds.includes(TITLE_ROW) && (
+        <TitleRow
+          title={title}
+          tooShort={titleTooShort}
+          onRename={onRename}
+          {...rowState(TITLE_ROW)}
+        />
+      )}
+      {configs.map((config) => (
+        <DetailRow key={config.id} config={config} values={values} {...rowState(config.id)} />
+      ))}
+    </div>
+  );
+}
+
+/** The small outlined button at a row's right end: "Add", "Edit", "Change". */
+export function RowButton({
+  onClick,
+  children,
+}: {
+  readonly onClick: () => void;
+  readonly children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="h-[30px] shrink-0 rounded-lg border border-gray-300 bg-white px-3 text-[13px] font-medium text-gray-900 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40"
+    >
+      {children}
+    </button>
+  );
+}
+
+/** A row's value once it has one: click it to change it. */
+const ROW_VALUE_CLASS =
+  'min-w-0 max-w-[230px] truncate rounded-md px-1 text-right text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 focus-visible:bg-gray-50 focus-visible:outline-none';
+
+interface RowProps {
+  readonly label: string;
+  /** A second, quieter line under the label. */
+  readonly hint?: string;
+  /** What sits at the row's right end: a button, a small field, or the value. */
+  readonly control?: ReactNode;
+  /** An editor too wide for the right end, on a line of its own under the label. */
+  readonly below?: ReactNode;
+}
+
+function Row({ label, hint, control, below }: RowProps) {
+  return (
+    <div className="flex flex-col gap-2 px-3.5 py-2.5">
+      <div className="flex min-h-[30px] items-center justify-between gap-3">
+        <span className="flex min-w-0 flex-col">
+          <span className="text-sm font-medium text-gray-900">{label}</span>
+          {hint && <span className="text-xs text-gray-600">{hint}</span>}
+        </span>
+        {control}
+      </div>
+      {below}
+    </div>
+  );
+}
+
+interface RowEditing {
+  readonly editing: boolean;
+  readonly onEditingChange: (editing: boolean) => void;
+}
+
+function DetailRow({
+  config,
+  values,
+  editing,
+  onEditingChange,
+}: RowEditing & {
+  readonly config: MastheadWidgetConfig;
+  readonly values: PublishingFormData;
+}) {
+  const open = () => onEditingChange(true);
+  const close = () => onEditingChange(false);
+  const value = detailValue(config, values);
+  // What sits at the row's right end when no editor is open: the value, to change it, or Add.
+  const control = value ? (
+    <button type="button" onClick={open} title="Change" className={ROW_VALUE_CLASS}>
+      {value}
+    </button>
+  ) : (
+    <RowButton onClick={open}>Add</RowButton>
+  );
+
+  switch (config.kind) {
+    case 'cover':
+      return <CoverRow config={config} value={values.coverImage} />;
+    case 'amount':
+      return (
+        <Row
+          label={config.name}
+          control={
+            editing ? (
+              <AmountEditor config={config} initial={values.budget} onClose={close} />
+            ) : (
+              control
+            )
+          }
+        />
+      );
+    case 'people':
+      return (
+        <Row
+          label={config.name}
+          control={editing ? undefined : control}
+          below={
+            editing ? (
+              <PeopleEditor
+                config={config}
+                value={peopleOf(values, config.field)}
+                onClose={close}
+              />
+            ) : undefined
+          }
+        />
+      );
+    case 'text':
+    case 'paragraph':
+      return (
+        <Row
+          label={config.name}
+          control={editing ? undefined : control}
+          below={
+            editing ? (
+              <div className="flex">
+                <TextEditor config={config} initial={value ?? ''} onClose={close} />
+              </div>
+            ) : undefined
+          }
+        />
+      );
+    // A proposal publishes without an RFP, so it is never listed here.
+    case 'grant':
+      return null;
+  }
+}
+
+/** The cover image has no editor: Add opens the file picker, and the pick shows as a thumbnail. */
+function CoverRow({
+  config,
+  value,
+}: {
+  readonly config: MastheadWidgetConfig;
+  readonly value: PublishingFormData['coverImage'];
+}) {
+  const cover = useCoverImagePicker(value);
+  return (
+    <Row
+      label={config.name}
+      hint={cover.error ?? undefined}
+      control={
+        <span className="flex shrink-0 items-center gap-2.5">
+          {cover.imageUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={cover.imageUrl} alt="" className="h-[30px] w-12 rounded-md object-cover" />
+          )}
+          <RowButton onClick={cover.browse}>{cover.imageUrl ? 'Change' : 'Add'}</RowButton>
+          <input {...cover.inputProps} data-testid="publish-dialog-cover-input" />
+        </span>
+      }
+    />
+  );
+}
+
+/** The title is never empty, only too short to publish under; it is edited here in full. */
+function TitleRow({
+  title,
+  tooShort,
+  onRename,
+  editing,
+  onEditingChange,
+}: RowEditing & {
+  readonly title: string;
+  readonly tooShort: boolean;
+  readonly onRename: (title: string) => void;
+}) {
+  return (
+    <Row
+      label="Title"
+      hint={tooShort ? `At least ${MIN_PUBLISH_TITLE_LENGTH} characters` : undefined}
+      control={
+        editing ? undefined : <RowButton onClick={() => onEditingChange(true)}>Edit</RowButton>
+      }
+      below={
+        editing ? (
+          <TitleEditor title={title} onRename={onRename} onClose={() => onEditingChange(false)} />
+        ) : undefined
+      }
+    />
+  );
+}
+
+function TitleEditor({
+  title,
+  onRename,
+  onClose,
+}: {
+  readonly title: string;
+  readonly onRename: (title: string) => void;
+  readonly onClose: () => void;
+}) {
+  const [draft, setDraft] = useState(title);
+  const ref = useRef<HTMLSpanElement>(null);
+  const commit = () => {
+    const next = normalizeTitle(draft);
+    // A note is never left without a title.
+    if (next && next !== title) onRename(next);
+    onClose();
+  };
+  useLeaveToCommit(ref, commit);
+
+  return (
+    <span ref={ref} className={cn(EDITING_FIELD_CLASS, 'h-9')}>
+      <input
+        autoFocus
+        type="text"
+        aria-label="Title"
+        maxLength={MAX_TITLE_LENGTH}
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            commit();
+          } else if (event.key === 'Escape') {
+            // Handled here, so the dialog does not take it as its own and close.
+            event.preventDefault();
+            onClose();
+          }
+        }}
+        className={EDITING_INPUT_CLASS}
+      />
+    </span>
+  );
+}
diff --git a/components/AIMode/document/PublishDialog.tsx b/components/AIMode/document/PublishDialog.tsx
new file mode 100644
index 000000000..8a1a554d5
--- /dev/null
+++ b/components/AIMode/document/PublishDialog.tsx
@@ -0,0 +1,331 @@
+'use client';
+
+import { Fragment, useEffect, useState, type ReactNode } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { useFormContext } from 'react-hook-form';
+import { HelpCircle } from 'lucide-react';
+import { PublishGuidelines } from '@/components/modals/ConfirmPublishModal';
+import { NonprofitConfirmModal, NonprofitSearchSection } from '@/components/Nonprofit';
+import { usePublishingController } from '@/components/Notebook/PublishingForm';
+import { GRANT_APPLICATION_VISIBILITY_OPTIONS } from '@/components/Notebook/PublishingForm/components/GrantApplicationVisibilitySection';
+import {
+  useIsLockedPrivate,
+  useShowPrivateWarning,
+} from '@/components/Notebook/PublishingForm/components/PreregistrationPrivacySection';
+import { DEFAULT_FUNDRAISE_END_DAYS } from '@/components/Notebook/PublishingForm/formMapping';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { Button } from '@/components/ui/Button';
+import { ButtonGroup } from '@/components/ui/ButtonGroup';
+import { Checkbox } from '@/components/ui/form/Checkbox';
+import { Tooltip } from '@/components/ui/Tooltip';
+import { usePublishReadiness } from './masthead/usePublishReadiness';
+import { MissingDetails, RowButton } from './MissingDetails';
+
+const FUNDRAISE_DAYS = ['30', '60', '90'] as const;
+
+interface PublishDialogProps {
+  /** The note's title, from the masthead: what the work is published under. */
+  readonly title: string;
+  /** Saves a new title, for when the one it has is too short to publish under. */
+  readonly onRename: (title: string) => void;
+}
+
+/**
+ * The workspace's one step between Publish and a published work, and the only
+ * place that says what is missing. It opens on every Publish click: whatever
+ * the document still needs is listed first, each with a way to add it here;
+ * then what the masthead leaves out because it has a sensible default (who
+ * can see the work, how long a fundraise runs, a nonprofit); then the posting
+ * guidelines to agree to. Its Publish waits until nothing is missing. An
+ * update has only the list and the guidelines.
+ */
+export function PublishDialog({ title, onRename }: PublishDialogProps) {
+  const { articleType, workId, isPublishing, dismissConfirmation, confirmPublish } =
+    usePublishingController();
+  const { watch } = useFormContext<PublishingFormData>();
+  const selectedNonprofit = watch('selectedNonprofit');
+  const readiness = usePublishReadiness(title);
+  const [hasAgreed, setHasAgreed] = useState(false);
+  const [showGuidelines, setShowGuidelines] = useState(false);
+  // The nonprofit is chosen in here, so its confirmation comes after, in the dialog's place.
+  const [confirmingNonprofit, setConfirmingNonprofit] = useState(false);
+
+  const isRfp = articleType === 'grant';
+  const isUpdate = Boolean(workId);
+  const isNewProposal = articleType === 'preregistration' && !isUpdate;
+  const privateNeedsRfp = useShowPrivateWarning() && isNewProposal;
+
+  const action = isUpdate ? 'Update' : 'Publish';
+  const canPublish = readiness.ready && hasAgreed && !isPublishing && !privateNeedsRfp;
+
+  const publish = () => {
+    if (!canPublish) return;
+    if (isNewProposal && selectedNonprofit) setConfirmingNonprofit(true);
+    else void confirmPublish(title);
+  };
+
+  return (
+    <>
+      <Transition appear show={!confirmingNonprofit} as={Fragment}>
+        {/* Matches BaseModal. */}
+        <Dialog
+          as="div"
+          className="relative z-[9999]"
+          onClose={isPublishing ? () => {} : dismissConfirmation}
+        >
+          <TransitionChild
+            as={Fragment}
+            enter="ease-out duration-200"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-150"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-900/40" />
+          </TransitionChild>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4">
+              <TransitionChild
+                as={Fragment}
+                enter="ease-out duration-200"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-150"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                {/* No overflow clipping: the people picker drops its results past the panel. */}
+                <DialogPanel
+                  data-testid="workspace-publish-dialog"
+                  className="flex w-full max-w-[440px] flex-col gap-4 rounded-2xl bg-white p-6 text-left shadow-2xl"
+                >
+                  <DialogTitle
+                    as="h2"
+                    className="text-lg font-semibold tracking-tight text-gray-900"
+                  >
+                    {action} {isRfp ? 'RFP' : 'proposal'}
+                  </DialogTitle>
+
+                  <MissingDetails readiness={readiness} title={title} onRename={onRename} />
+
+                  {isNewProposal && <ProposalSettings />}
+                  {isRfp && !isUpdate && <RfpSettings />}
+
+                  <div className="border-t border-gray-200 pt-3.5">
+                    {showGuidelines && (
+                      <PublishGuidelines
+                        variant={isRfp ? 'rfp' : 'default'}
+                        className="mb-3.5"
+                        iconClassName="text-gray-600"
+                      />
+                    )}
+                    <div className="flex items-start gap-2">
+                      <Checkbox
+                        id="workspace-publish-guidelines"
+                        checked={hasAgreed}
+                        disabled={isPublishing}
+                        onCheckedChange={(checked) => setHasAgreed(checked)}
+                      />
+                      <p className="text-[13px] leading-snug text-gray-600">
+                        <label htmlFor="workspace-publish-guidelines">
+                          I have adhered to the ResearchHub{' '}
+                        </label>
+                        <button
+                          type="button"
+                          onClick={() => setShowGuidelines((shown) => !shown)}
+                          aria-expanded={showGuidelines}
+                          className="underline underline-offset-2 transition-colors hover:text-gray-900"
+                        >
+                          posting guidelines
+                        </button>
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-2.5">
+                    <Button variant="ghost" onClick={dismissConfirmation} disabled={isPublishing}>
+                      Cancel
+                    </Button>
+                    <Button
+                      data-testid="workspace-publish-confirm"
+                      variant="default"
+                      onClick={publish}
+                      disabled={!canPublish}
+                      className="disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                      {isPublishing ? 'Publishing...' : action}
+                    </Button>
+                  </div>
+                </DialogPanel>
+              </TransitionChild>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+
+      {confirmingNonprofit && selectedNonprofit && (
+        <NonprofitConfirmModal
+          isOpen
+          onClose={() => setConfirmingNonprofit(false)}
+          onConfirm={() => {
+            setConfirmingNonprofit(false);
+            void confirmPublish(title);
+          }}
+          nonprofitName={selectedNonprofit.name}
+          ein={selectedNonprofit.ein}
+        />
+      )}
+    </>
+  );
+}
+
+/** A setting with a default: its name at the left, its control at the right. */
+function SettingRow({
+  label,
+  children,
+}: {
+  readonly label: ReactNode;
+  readonly children: ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="text-[13px] font-medium text-gray-700">{label}</div>
+      {children}
+    </div>
+  );
+}
+
+/** A rule that comes with a choice, stated in gray under it. */
+function SettingNote({ children }: { readonly children: ReactNode }) {
+  return <p className="-mt-2 text-xs leading-snug text-gray-600">{children}</p>;
+}
+
+/**
+ * A new proposal's settings: who can see it, how long it stays open, and a
+ * nonprofit to receive the funds. Two rules come with the first, and the
+ * first of them holds back the dialog's Publish: a private proposal needs an
+ * RFP, and an RFP that only takes private proposals makes the proposal private.
+ */
+function ProposalSettings() {
+  const { watch, setValue } = useFormContext<PublishingFormData>();
+  const isPublic = watch('isPublic');
+  const days = watch('fundraiseEndDays') ?? DEFAULT_FUNDRAISE_END_DAYS;
+  const isLockedPrivate = useIsLockedPrivate();
+  const privateNeedsRfp = useShowPrivateWarning();
+  const [nonprofitOpen, setNonprofitOpen] = useState(() => Boolean(watch('selectedNonprofit')));
+  // The RFP may have been chosen since the form loaded, which is the only
+  // other moment the lock is applied.
+  useEffect(() => {
+    if (isLockedPrivate && isPublic !== false) setValue('isPublic', false);
+  }, [isLockedPrivate, isPublic, setValue]);
+
+  return (
+    <>
+      <SettingRow label="Visibility">
+        {isLockedPrivate ? (
+          <span className="text-[13px] font-medium text-gray-900">Private to funder</span>
+        ) : (
+          <ButtonGroup
+            size="sm"
+            value={isPublic === false ? 'private' : 'public'}
+            onChange={(next) => setValue('isPublic', next === 'public', { shouldValidate: true })}
+            options={[
+              { value: 'public', label: 'Public' },
+              { value: 'private', label: 'Private to funder' },
+            ]}
+          />
+        )}
+      </SettingRow>
+      {isLockedPrivate && (
+        <SettingNote>
+          The RFP you are applying to only takes private proposals. Only funder and vetted
+          peer-reviewers will be able to view yours.
+        </SettingNote>
+      )}
+      {privateNeedsRfp && (
+        <SettingNote>In order to submit a private proposal, you must select an RFP.</SettingNote>
+      )}
+
+      <SettingRow label="Open for">
+        <ButtonGroup
+          size="sm"
+          value={days}
+          onChange={(next) =>
+            setValue('fundraiseEndDays', next as (typeof FUNDRAISE_DAYS)[number], {
+              shouldDirty: true,
+            })
+          }
+          options={FUNDRAISE_DAYS.map((value) => ({
+            value,
+            label: value === days ? `${value} days` : value,
+          }))}
+        />
+      </SettingRow>
+
+      {nonprofitOpen ? (
+        <NonprofitSearchSection />
+      ) : (
+        <SettingRow
+          label={
+            <span className="flex items-center gap-1">
+              Nonprofit <span className="font-normal text-gray-500">optional</span>
+              <Tooltip
+                content="A nonprofit, such as your university’s foundation, can receive the funds for you. Endaoment, a nonprofit community foundation, processes the donations and sends them on, so you never handle payments and donors can get a tax receipt."
+                position="top"
+                width="w-72"
+                theme="dark"
+                wrapperAs="span"
+                wrapperClassName="inline-flex"
+              >
+                <span
+                  tabIndex={0}
+                  aria-label="About nonprofits"
+                  className="flex h-5 w-5 items-center justify-center rounded-full text-gray-400 transition-colors hover:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40"
+                >
+                  <HelpCircle className="h-4 w-4" aria-hidden="true" />
+                </span>
+              </Tooltip>
+            </span>
+          }
+        >
+          <RowButton onClick={() => setNonprofitOpen(true)}>Add</RowButton>
+        </SettingRow>
+      )}
+    </>
+  );
+}
+
+/** A new RFP's one setting: how its applicants may submit. */
+function RfpSettings() {
+  const { watch, setValue } = useFormContext<PublishingFormData>();
+  const value = watch('applicationVisibility') ?? 'OPTIONAL';
+  const selected = GRANT_APPLICATION_VISIBILITY_OPTIONS.find((option) => option.value === value);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-[13px] font-medium text-gray-700">Application visibility</div>
+      <ButtonGroup
+        size="sm"
+        className="self-start"
+        value={value}
+        onChange={(next) =>
+          setValue('applicationVisibility', next as PublishingFormData['applicationVisibility'], {
+            shouldValidate: true,
+          })
+        }
+        options={GRANT_APPLICATION_VISIBILITY_OPTIONS.map((option) => ({
+          value: option.value,
+          label: option.label,
+        }))}
+      />
+      {selected && (
+        <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-gray-600">
+          {selected.description}
+          {selected.badge}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/components/AIMode/document/PublishPill.tsx b/components/AIMode/document/PublishPill.tsx
new file mode 100644
index 000000000..d166b723d
--- /dev/null
+++ b/components/AIMode/document/PublishPill.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { ExternalLink } from 'lucide-react';
+import { usePublishingController } from '@/components/Notebook/PublishingForm';
+import { getWorkPath } from '@/components/Notebook/PublishingForm/formMapping';
+
+/**
+ * The document's Publish button, floating at the bottom centre of the pane.
+ * It never waits on missing details and never comments on them: every click
+ * opens the publish dialog, which lists what is still empty and lets it be
+ * filled in there. Once published it says so, with a way to the page and an
+ * Update button.
+ */
+export function PublishPill() {
+  const controller = usePublishingController();
+  const { note, editor, articleType, workId, isPublished, isChangelog } = controller;
+
+  // A type this surface cannot publish has no button to press.
+  const isNewPreprint = articleType === 'discussion' && !workId && !isChangelog;
+  if (!articleType || isNewPreprint || controller.blockedMessage) return null;
+
+  const handleClick = () => void controller.requestPublish();
+
+  const busyLabel = controller.isUpserting
+    ? 'Publishing...'
+    : controller.isLinkingNonprofit
+      ? 'Linking nonprofit...'
+      : controller.isRedirecting
+        ? 'Redirecting...'
+        : null;
+  const disabled =
+    controller.readOnly || controller.isDeclined || controller.isPublishing || editor == null;
+
+  const buttonClass =
+    'rounded-full bg-primary-600 font-semibold text-white transition-colors hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60';
+  const livePath =
+    isPublished && note?.post && workId ? getWorkPath(articleType, workId, note.post.slug) : null;
+
+  return (
+    <div className="pointer-events-none absolute inset-x-0 bottom-[22px] flex justify-center px-4">
+      {livePath ? (
+        <div className="pointer-events-auto flex h-11 items-center rounded-full border border-gray-200 bg-white pl-4 pr-1 shadow-lg">
+          <a
+            href={livePath}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
+          >
+            Published
+            <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
+          </a>
+          <span aria-hidden="true" className="mx-3 h-5 w-px bg-gray-200" />
+          <button
+            type="button"
+            onClick={handleClick}
+            disabled={disabled}
+            data-testid="workspace-publish"
+            className={`${buttonClass} h-9 px-4 text-sm`}
+          >
+            {busyLabel ?? 'Update'}
+          </button>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={handleClick}
+          disabled={disabled}
+          data-testid="workspace-publish"
+          className={`${buttonClass} pointer-events-auto h-11 px-6 text-[15px] shadow-[0_10px_28px_rgba(37,99,235,0.3),0_2px_6px_rgba(17,24,39,0.12)]`}
+        >
+          {busyLabel ?? 'Publish'}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/components/AIMode/document/details/AllDetailsBlock.tsx b/components/AIMode/document/details/AllDetailsBlock.tsx
deleted file mode 100644
index 6a0d69615..000000000
--- a/components/AIMode/document/details/AllDetailsBlock.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client';
-
-import { ListChecks } from 'lucide-react';
-import { cn } from '@/utils/styles';
-
-/** Fixed, so the strip can count how many other blocks fit beside it. Wide
- * enough for the label, the folded count and the tally on one line each. */
-export const ALL_DETAILS_BLOCK_WIDTH = 140;
-
-interface AllDetailsBlockProps {
-  readonly done: number;
-  readonly total: number;
-  /** Blocks the strip had no room for; they are reachable here. */
-  readonly hiddenCount: number;
-  /** The full form is showing. */
-  readonly active: boolean;
-  readonly onClick: () => void;
-}
-
-/**
- * The last block: the whole details form, and the way to any block that did
- * not fit. Same flat shape as the other blocks; the one before it draws the
- * separator.
- */
-export function AllDetailsBlock({
-  done,
-  total,
-  hiddenCount,
-  active,
-  onClick,
-}: AllDetailsBlockProps) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-pressed={active}
-      style={{ minWidth: ALL_DETAILS_BLOCK_WIDTH }}
-      className={cn(
-        'flex h-full flex-1 flex-col justify-center px-2.5 text-left transition-colors',
-        active
-          ? 'relative z-10 bg-primary-50 outline outline-2 -outline-offset-2 outline-primary-400'
-          : 'bg-gray-50 hover:bg-gray-100'
-      )}
-    >
-      <span className="flex items-center justify-between gap-1.5 whitespace-nowrap">
-        <span
-          className={cn(
-            'flex items-center gap-1.5 text-[11px] font-medium',
-            active ? 'text-primary-700' : 'text-gray-600'
-          )}
-        >
-          <ListChecks className="h-3 w-3 shrink-0" aria-hidden="true" />
-          All details
-        </span>
-        {hiddenCount > 0 && (
-          <span
-            title={`${hiddenCount} more ${hiddenCount === 1 ? 'detail' : 'details'} inside`}
-            className="shrink-0 rounded-full bg-gray-200 px-1.5 text-[10px] font-bold text-gray-700"
-          >
-            +{hiddenCount}
-          </span>
-        )}
-      </span>
-      <span className="truncate whitespace-nowrap text-[13px] font-semibold text-gray-900">
-        {done} of {total} done
-      </span>
-    </button>
-  );
-}
diff --git a/components/AIMode/document/details/DetailBlock.tsx b/components/AIMode/document/details/DetailBlock.tsx
deleted file mode 100644
index 456a411e2..000000000
--- a/components/AIMode/document/details/DetailBlock.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-'use client';
-
-import { Check } from 'lucide-react';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover';
-import { cn } from '@/utils/styles';
-import type { DetailBlockConfig } from './detailBlocks';
-
-/** A block is this wide at the least; the strip folds blocks that would be narrower. */
-export const DETAIL_BLOCK_MIN_WIDTH = 148;
-
-interface DetailBlockProps {
-  readonly config: DetailBlockConfig;
-  readonly noteId: number;
-  /** The value to show, or null while nothing is set. */
-  readonly value: string | null;
-  /** This block's editor is showing. */
-  readonly open: boolean;
-  readonly onOpenChange: (open: boolean) => void;
-}
-
-/**
- * One publishing detail as a small card: what it is, whether it is set, and
- * the value. Clicking opens its editor — a popover with just that section of
- * the form, or a modal the block owns.
- */
-export function DetailBlock({ config, noteId, value, open, onOpenChange }: DetailBlockProps) {
-  const filled = value != null;
-  const face = <DetailBlockFace config={config} value={value} filled={filled} open={open} />;
-
-  if (config.editor.kind === 'modal') {
-    const { Modal } = config.editor;
-    return (
-      <>
-        <button
-          type="button"
-          onClick={() => onOpenChange(true)}
-          aria-expanded={open}
-          className={blockClass(filled, open)}
-        >
-          {face}
-        </button>
-        <Modal noteId={noteId} isOpen={open} onClose={() => onOpenChange(false)} />
-      </>
-    );
-  }
-
-  const { Section } = config.editor;
-  return (
-    <Popover open={open} onOpenChange={onOpenChange}>
-      <PopoverTrigger asChild>
-        <button type="button" className={blockClass(filled, open)}>
-          {face}
-        </button>
-      </PopoverTrigger>
-      {/* No height cap or overflow here: the people pickers drop their list
-          below the input inside the panel. */}
-      <PopoverContent
-        aria-label={config.label}
-        className="w-[340px] max-w-[calc(100vw-1rem)] p-4 shadow-xl"
-      >
-        <Section className="p-0" />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-const blockClass = (filled: boolean, open: boolean) =>
-  cn(
-    'flex min-w-0 flex-1 flex-col justify-center border-r h-full bg-white px-2.5 text-left transition-colors',
-    // The outline sits inside the block, so it is the same on every side
-    // whatever the neighbours' borders do.
-    open
-      ? 'relative z-10 border-primary-400 bg-primary-50 outline outline-2 -outline-offset-2 outline-primary-400'
-      : filled
-        ? 'border-gray-200 hover:bg-gray-50'
-        : 'border-gray-300 hover:bg-gray-50'
-  );
-
-function DetailBlockFace({
-  config,
-  value,
-  filled,
-  open,
-}: {
-  readonly config: DetailBlockConfig;
-  readonly value: string | null;
-  readonly filled: boolean;
-  readonly open: boolean;
-}) {
-  const Icon = config.icon;
-  return (
-    <>
-      <span className="flex items-center justify-between gap-1.5 whitespace-nowrap">
-        <span
-          className={cn(
-            'flex min-w-0 items-center gap-1.5 truncate text-[11px] font-medium',
-            open ? 'text-primary-700' : 'text-gray-600'
-          )}
-        >
-          <Icon className="h-3 w-3 shrink-0" aria-hidden="true" />
-          {config.label}
-        </span>
-        <DetailBlockMark filled={filled} optional={Boolean(config.optional)} />
-      </span>
-      <span
-        className={cn(
-          'truncate text-[13px] font-semibold',
-          filled ? 'text-gray-900' : 'text-primary-700'
-        )}
-      >
-        {value ?? config.emptyLabel}
-      </span>
-    </>
-  );
-}
-
-/** Done, still required, or optional — at a glance, at the block's corner. */
-function DetailBlockMark({
-  filled,
-  optional,
-}: {
-  readonly filled: boolean;
-  readonly optional: boolean;
-}) {
-  if (filled) {
-    return (
-      <span
-        aria-label="Done"
-        className="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white"
-      >
-        <Check className="h-2 w-2" strokeWidth={3.5} aria-hidden="true" />
-      </span>
-    );
-  }
-  if (optional) {
-    return <span className="shrink-0 text-[10px] font-medium text-gray-500">Optional</span>;
-  }
-  return (
-    <span aria-label="Required" className="h-[7px] w-[7px] shrink-0 rounded-full bg-amber-700" />
-  );
-}
diff --git a/components/AIMode/document/details/DetailBlockStrip.tsx b/components/AIMode/document/details/DetailBlockStrip.tsx
deleted file mode 100644
index ec0fcb3fb..000000000
--- a/components/AIMode/document/details/DetailBlockStrip.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client';
-
-import { useMemo, useState } from 'react';
-import { useWatch } from 'react-hook-form';
-import { usePublishingController } from '@/components/Notebook/PublishingForm';
-import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
-import { useFittingCount } from '@/hooks/useFittingCount';
-import { AllDetailsBlock, ALL_DETAILS_BLOCK_WIDTH } from './AllDetailsBlock';
-import { DetailBlock, DETAIL_BLOCK_MIN_WIDTH } from './DetailBlock';
-import { detailBlocksFor } from './detailBlocks';
-
-const GAP = 0;
-
-interface DetailBlockStripProps {
-  /** The full details form is showing instead of the document. */
-  readonly detailsOpen: boolean;
-  readonly onToggleDetails: () => void;
-}
-
-/**
- * The publishing details as a row of blocks above the document, as many as
- * the pane is wide enough for. Blocks keep a fixed order; the ones past the
- * room fold into the last block, which opens the full form and says how
- * many it holds. One editor is open at a time.
- */
-export function DetailBlockStrip({ detailsOpen, onToggleDetails }: DetailBlockStripProps) {
-  const { note, articleType } = usePublishingController();
-  const values = useWatch<PublishingFormData>() as PublishingFormData;
-  const [openBlockId, setOpenBlockId] = useState<string | null>(null);
-
-  const blocks = useMemo(
-    () => detailBlocksFor(articleType).filter((block) => !block.hiddenWhen?.(values)),
-    [articleType, values]
-  );
-  const summaries = useMemo(() => blocks.map((block) => block.summarize(values)), [blocks, values]);
-  const done = summaries.filter((value) => value != null).length;
-
-  const { ref, count: visibleCount } = useFittingCount<HTMLDivElement>({
-    itemCount: blocks.length,
-    minItemWidth: DETAIL_BLOCK_MIN_WIDTH,
-    gap: GAP,
-    reservedWidth: ALL_DETAILS_BLOCK_WIDTH + GAP,
-  });
-
-  // A field is mounted once: the full form and a block's editor never show
-  // together, so opening either puts the other away.
-  const openDetails = () => {
-    setOpenBlockId(null);
-    onToggleDetails();
-  };
-  const setBlockOpen = (id: string, open: boolean) => {
-    if (open && detailsOpen) onToggleDetails();
-    setOpenBlockId(open ? id : null);
-  };
-
-  return (
-    <div
-      ref={ref}
-      style={{ gap: GAP }}
-      className="flex h-16 shrink-0 items-center border-b border-gray-200 bg-white"
-    >
-      {note != null &&
-        blocks
-          .slice(0, visibleCount)
-          .map((block, index) => (
-            <DetailBlock
-              key={block.id}
-              config={block}
-              noteId={note.id}
-              value={summaries[index]}
-              open={openBlockId === block.id}
-              onOpenChange={(open) => setBlockOpen(block.id, open)}
-            />
-          ))}
-      {note != null && (
-        <AllDetailsBlock
-          done={done}
-          total={blocks.length}
-          hiddenCount={Math.max(0, blocks.length - visibleCount)}
-          active={detailsOpen}
-          onClick={openDetails}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/components/AIMode/document/details/detailBlocks.ts b/components/AIMode/document/details/detailBlocks.ts
deleted file mode 100644
index bbe902508..000000000
--- a/components/AIMode/document/details/detailBlocks.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import type { ComponentType } from 'react';
-import {
-  DollarSign,
-  FileText,
-  Image as ImageIcon,
-  Target,
-  Users,
-  type LucideIcon,
-} from 'lucide-react';
-import { AuthorsSection } from '@/components/Notebook/PublishingForm/components/AuthorsSection';
-import { ContactsSection } from '@/components/Notebook/PublishingForm/components/ContactsSection';
-import { FundingGoalSection } from '@/components/Notebook/PublishingForm/components/FundingGoalSection';
-import { GrantDescriptionSection } from '@/components/Notebook/PublishingForm/components/GrantDescriptionSection';
-import { GrantFundingAmountSection } from '@/components/Notebook/PublishingForm/components/GrantFundingAmountSection';
-import type { SectionProps } from '@/components/Notebook/PublishingForm/components/SectionProps';
-import { WorkImageSection } from '@/components/Notebook/PublishingForm/components/WorkImageSection';
-import type {
-  ArticleType,
-  PublishingFormData,
-  SelectOption,
-} from '@/components/Notebook/PublishingForm/schema';
-import { SelectGrantForNoteModal, type NoteModalProps } from './SelectGrantForNoteModal';
-
-/** How a block is edited when clicked. */
-export type DetailBlockEditor =
-  /** A small panel over the document holding just this section of the form. */
-  | { readonly kind: 'popover'; readonly Section: ComponentType<SectionProps> }
-  /** A full modal the block owns; it stays mounted while the modal is open. */
-  | { readonly kind: 'modal'; readonly Modal: ComponentType<NoteModalProps> };
-
-export interface DetailBlockConfig {
-  readonly id: string;
-  readonly label: string;
-  readonly icon: LucideIcon;
-  /** Shown in place of a value while nothing is set. */
-  readonly emptyLabel: string;
-  /** The value to show once set; null while it is not. */
-  readonly summarize: (values: PublishingFormData) => string | null;
-  /** The type can publish without it. */
-  readonly optional?: boolean;
-  /** The block disappears when this holds. */
-  readonly hiddenWhen?: (values: PublishingFormData) => boolean;
-  readonly editor: DetailBlockEditor;
-}
-
-const people = (options: SelectOption[] | undefined, noun: string): string | null => {
-  if (!options?.length) return null;
-  return options.length === 1 ? options[0].label : `${options.length} ${noun}`;
-};
-
-const amount = (budget: string | undefined): string | null => {
-  const value = Number(budget);
-  return value > 0 ? `$${value.toLocaleString('en-US')}` : null;
-};
-
-const coverImage = (values: PublishingFormData): string | null =>
-  values.coverImage?.file?.name ?? (values.coverImage?.url ? 'Image added' : null);
-
-const APPLYING_TO: DetailBlockConfig = {
-  id: 'applyingTo',
-  label: 'Applying to',
-  icon: Target,
-  emptyLabel: 'Select an RFP',
-  optional: true,
-  summarize: (values) => values.selectedGrant?.shortTitle ?? null,
-  // The answer to a Request for Proposal cannot change once published; the
-  // field renders nothing then either.
-  hiddenWhen: (values) => Boolean(values.workId),
-  editor: { kind: 'modal', Modal: SelectGrantForNoteModal },
-};
-
-const FUNDING_GOAL: DetailBlockConfig = {
-  id: 'fundingGoal',
-  label: 'Funding goal',
-  icon: DollarSign,
-  emptyLabel: 'Add amount',
-  summarize: (values) => amount(values.budget),
-  editor: { kind: 'popover', Section: FundingGoalSection },
-};
-
-const FUNDING_AMOUNT: DetailBlockConfig = {
-  id: 'fundingAmount',
-  label: 'Funding amount',
-  icon: DollarSign,
-  emptyLabel: 'Add amount',
-  summarize: (values) => amount(values.budget),
-  editor: { kind: 'popover', Section: GrantFundingAmountSection },
-};
-
-const SHORT_DESCRIPTION: DetailBlockConfig = {
-  id: 'shortDescription',
-  label: 'Short description',
-  icon: FileText,
-  emptyLabel: 'Add description',
-  summarize: (values) => values.shortDescription?.trim() || null,
-  editor: { kind: 'popover', Section: GrantDescriptionSection },
-};
-
-const AUTHORS: DetailBlockConfig = {
-  id: 'authors',
-  label: 'Authors',
-  icon: Users,
-  emptyLabel: 'Add authors',
-  summarize: (values) => people(values.authors, 'authors'),
-  editor: { kind: 'popover', Section: AuthorsSection },
-};
-
-const CONTACTS: DetailBlockConfig = {
-  id: 'contacts',
-  label: 'Contacts',
-  icon: Users,
-  emptyLabel: 'Add contact',
-  summarize: (values) => people(values.contacts, 'contacts'),
-  editor: { kind: 'popover', Section: ContactsSection },
-};
-
-const COVER_IMAGE: DetailBlockConfig = {
-  id: 'coverImage',
-  label: 'Cover image',
-  icon: ImageIcon,
-  emptyLabel: 'Add image',
-  summarize: coverImage,
-  editor: { kind: 'popover', Section: WorkImageSection },
-};
-
-const BLOCKS_BY_TYPE: Record<ArticleType, readonly DetailBlockConfig[]> = {
-  preregistration: [APPLYING_TO, FUNDING_GOAL, AUTHORS, COVER_IMAGE],
-  grant: [FUNDING_AMOUNT, SHORT_DESCRIPTION, CONTACTS, { ...COVER_IMAGE, optional: true }],
-  registered_report: [AUTHORS, COVER_IMAGE],
-  discussion: [AUTHORS],
-};
-
-/** The blocks a work of this type shows, in the order they keep. */
-export function detailBlocksFor(
-  articleType: ArticleType | undefined
-): readonly DetailBlockConfig[] {
-  return articleType ? BLOCKS_BY_TYPE[articleType] : [];
-}
diff --git a/components/AIMode/document/masthead/AmountWidget.tsx b/components/AIMode/document/masthead/AmountWidget.tsx
new file mode 100644
index 000000000..be26f4352
--- /dev/null
+++ b/components/AIMode/document/masthead/AmountWidget.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AddDetail, DetailValue, EDITING_FIELD_CLASS, EDITING_INPUT_CLASS } from './MastheadLine';
+import { formatAmount, type MastheadWidgetConfig } from './mastheadWidgets';
+import { useLeaveToCommit } from './useLeaveToCommit';
+
+/** Whole dollars, with room for any amount a fund would name. */
+const MAX_DIGITS = 12;
+
+const withSeparators = (digits: string): string =>
+  digits ? new Intl.NumberFormat('en-US').format(Number.parseInt(digits, 10)) : '';
+
+interface AmountWidgetProps {
+  readonly config: MastheadWidgetConfig;
+  readonly value: string | undefined;
+  readonly editable: boolean;
+  readonly editing: boolean;
+  readonly onEditingChange: (editing: boolean) => void;
+}
+
+/** A sum in whole US dollars: a proposal's funding goal, an RFP's funding amount. */
+export function AmountWidget({
+  config,
+  value,
+  editable,
+  editing,
+  onEditingChange,
+}: AmountWidgetProps) {
+  const amount = formatAmount(value);
+
+  if (editing && editable) {
+    return (
+      <span className="inline-flex max-w-full items-center gap-[7px]">
+        <span className="shrink-0">{config.label}</span>
+        <AmountEditor config={config} initial={value} onClose={() => onEditingChange(false)} />
+      </span>
+    );
+  }
+  if (amount) {
+    return (
+      <DetailValue label={config.label} onEdit={editable ? () => onEditingChange(true) : undefined}>
+        {amount}
+      </DetailValue>
+    );
+  }
+  if (!editable) return null;
+  return (
+    <AddDetail icon={config.icon} label={config.addLabel} onClick={() => onEditingChange(true)} />
+  );
+}
+
+/**
+ * The amount as a small field: digits, shown with thousands separators.
+ * Enter or leaving it keeps the amount, Escape does not.
+ */
+export function AmountEditor({
+  config,
+  initial,
+  onClose,
+}: {
+  readonly config: MastheadWidgetConfig;
+  readonly initial: string | undefined;
+  readonly onClose: () => void;
+}) {
+  const { setValue } = useFormContext<PublishingFormData>();
+  const startDigits = Number(initial) > 0 ? String(Math.trunc(Number(initial))) : '';
+  const [digits, setDigits] = useState(startDigits);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const commit = () => {
+    if (digits !== startDigits) {
+      setValue('budget', digits, { shouldDirty: true, shouldValidate: true });
+    }
+    onClose();
+  };
+  useLeaveToCommit(ref, commit);
+
+  return (
+    <span ref={ref} className={cn(EDITING_FIELD_CLASS, 'h-8 w-[170px] min-w-0')}>
+      <span className="font-medium text-gray-900">$</span>
+      <input
+        autoFocus
+        type="text"
+        inputMode="numeric"
+        aria-label={`${config.label} in US dollars`}
+        placeholder="0"
+        value={withSeparators(digits)}
+        onChange={(event) => {
+          const next = event.target.value.replaceAll(/\D/g, '').replace(/^0+/, '');
+          setDigits(next.slice(0, MAX_DIGITS));
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            commit();
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            onClose();
+          }
+        }}
+        className={cn(EDITING_INPUT_CLASS, 'font-medium')}
+      />
+      <span className="shrink-0 text-xs text-gray-600">USD</span>
+    </span>
+  );
+}
diff --git a/components/AIMode/document/masthead/ApplyingToWidget.tsx b/components/AIMode/document/masthead/ApplyingToWidget.tsx
new file mode 100644
index 000000000..2ca2e2359
--- /dev/null
+++ b/components/AIMode/document/masthead/ApplyingToWidget.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useSelectedGrant } from '@/components/Notebook/PublishingForm/useSelectedGrant';
+import { AddDetail, DetailValue } from './MastheadLine';
+import type { MastheadWidgetConfig } from './mastheadWidgets';
+import { SelectGrantForNoteModal } from './SelectGrantForNoteModal';
+
+interface ApplyingToWidgetProps {
+  readonly config: MastheadWidgetConfig;
+  readonly noteId: number;
+  readonly editable: boolean;
+  readonly editing: boolean;
+  readonly onEditingChange: (editing: boolean) => void;
+}
+
+/**
+ * The Request for Proposal a proposal answers, picked in the RFP modal and
+ * saved to the note there. A proposal can publish without one, so it can
+ * also be taken away.
+ */
+export function ApplyingToWidget({
+  config,
+  noteId,
+  editable,
+  editing,
+  onEditingChange,
+}: ApplyingToWidgetProps) {
+  const { selectedGrant, isSaving, save } = useSelectedGrant(noteId);
+  const open = editable ? () => onEditingChange(true) : undefined;
+
+  if (!selectedGrant && !open) return null;
+  return (
+    <>
+      {selectedGrant ? (
+        <DetailValue
+          label={config.label}
+          onEdit={open}
+          onClear={open && !isSaving ? () => void save(null) : undefined}
+          clearLabel="Stop applying to this RFP"
+          truncate
+        >
+          {selectedGrant.shortTitle}
+        </DetailValue>
+      ) : (
+        open && <AddDetail icon={config.icon} label={config.addLabel} onClick={open} />
+      )}
+      {editable && (
+        <SelectGrantForNoteModal
+          noteId={noteId}
+          isOpen={editing}
+          onClose={() => onEditingChange(false)}
+        />
+      )}
+    </>
+  );
+}
diff --git a/components/AIMode/document/masthead/CoverImage.tsx b/components/AIMode/document/masthead/CoverImage.tsx
new file mode 100644
index 000000000..b9c4ec8f6
--- /dev/null
+++ b/components/AIMode/document/masthead/CoverImage.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import {
+  COVER_IMAGE_ACCEPT,
+  coverImageFileError,
+  useCoverImageUpload,
+} from '@/components/Notebook/PublishingForm/useCoverImageUpload';
+
+/**
+ * The cover image has no editing state: a click opens the file picker, the
+ * pick shows at once and uploads behind it. Two places start that click, the
+ * byline's offer to add one and the banner once there is one, so the picker
+ * is held here and its hidden input rendered once by the masthead.
+ */
+export function useCoverImagePicker(value: PublishingFormData['coverImage']) {
+  const { select, remove } = useCoverImageUpload();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const file = value?.file instanceof File ? value.file : null;
+  const [fileUrl, setFileUrl] = useState<string | null>(null);
+  useEffect(() => {
+    if (!file) {
+      setFileUrl(null);
+      return undefined;
+    }
+    const url = URL.createObjectURL(file);
+    setFileUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
+  const browse = useCallback(() => inputRef.current?.click(), []);
+  const handlePick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const picked = event.target.files?.[0];
+    event.target.value = ''; // allow picking the same file again
+    if (!picked) return;
+    const fileError = coverImageFileError(picked);
+    setError(fileError);
+    if (!fileError) void select(picked);
+  };
+
+  return {
+    /** The picture to show: the pick while it uploads, then what the server stored. */
+    imageUrl: fileUrl ?? value?.url ?? null,
+    /** Why the last pick was refused, if it was. */
+    error,
+    browse,
+    remove: () => {
+      setError(null);
+      remove();
+    },
+    inputProps: {
+      ref: inputRef,
+      type: 'file' as const,
+      accept: COVER_IMAGE_ACCEPT.join(','),
+      onChange: handlePick,
+      className: 'hidden',
+      'data-testid': 'masthead-cover-input',
+    },
+  };
+}
+
+interface CoverBannerProps {
+  readonly imageUrl: string;
+  /** Opens the file picker to replace it; absent where the cover cannot be changed. */
+  readonly onChange?: () => void;
+  readonly onRemove?: () => void;
+}
+
+/** The cover image across the column, above the title, as the published page shows it. */
+export function CoverBanner({ imageUrl, onChange, onRemove }: CoverBannerProps) {
+  // eslint-disable-next-line @next/next/no-img-element
+  const image = <img src={imageUrl} alt="" className="h-[170px] w-full object-cover" />;
+
+  if (!onChange) {
+    return <div className="mb-1 overflow-hidden rounded-[10px] bg-gray-100">{image}</div>;
+  }
+  return (
+    <div className="group relative mb-1">
+      <button
+        type="button"
+        onClick={onChange}
+        aria-label="Change the cover image"
+        title="Change the cover image"
+        className="block w-full overflow-hidden rounded-[10px] bg-gray-100 transition-opacity hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40"
+      >
+        {image}
+      </button>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label="Remove the cover image"
+          title="Remove the cover image"
+          className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-gray-700 opacity-0 shadow-sm transition hover:bg-white hover:text-gray-900 focus-visible:opacity-100 group-hover:opacity-100"
+        >
+          <X className="h-4 w-4" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/components/AIMode/document/masthead/Masthead.tsx b/components/AIMode/document/masthead/Masthead.tsx
new file mode 100644
index 000000000..a8835e33f
--- /dev/null
+++ b/components/AIMode/document/masthead/Masthead.tsx
@@ -0,0 +1,172 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useWatch } from 'react-hook-form';
+import { usePublishingController } from '@/components/Notebook/PublishingForm';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AmountWidget } from './AmountWidget';
+import { ApplyingToWidget } from './ApplyingToWidget';
+import { CoverBanner, useCoverImagePicker } from './CoverImage';
+import { AddDetail } from './MastheadLine';
+import { MastheadTitle } from './MastheadTitle';
+import {
+  detailValue,
+  mastheadWidgetsFor,
+  peopleOf,
+  type MastheadWidgetConfig,
+} from './mastheadWidgets';
+import { PeopleWidget } from './PeopleWidget';
+import { TextWidget } from './TextWidget';
+
+const LINE_CLASS = 'flex flex-wrap items-center gap-x-5 text-sm text-gray-600';
+
+interface MastheadProps {
+  /** The note's title, which the work is published under. */
+  readonly title: string;
+  readonly onRename: (title: string) => void;
+  /**
+   * What is set shows as it will be published, and nothing can be added or
+   * changed. The phone's drawer, whose Details form holds every field; a
+   * field must never have two inputs mounted at once.
+   */
+  readonly readOnly?: boolean;
+}
+
+/**
+ * The publishing details as the head of the document, shaped like the header
+ * the published page will have and no heavier: the cover image once there is
+ * one, the title, the authors and the RFP each on a line of their own once
+ * set, and one quiet line of the rest. A detail with a value is a label and
+ * the value ("By Kobe Attias"), one without is its icon and what to do ("Add
+ * cover"), and the one being edited is a small field in its place. Nothing here is ever marked as
+ * missing: the publish dialog lists what is still empty.
+ */
+export function Masthead({ title, onRename, readOnly = false }: MastheadProps) {
+  const { note, articleType, readOnly: formReadOnly, isDeclined } = usePublishingController();
+  const values = useWatch<PublishingFormData>() as PublishingFormData;
+  const canEdit = !readOnly && !formReadOnly && !isDeclined;
+
+  // One editor at a time.
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const noteId = note?.id ?? null;
+  useEffect(() => {
+    setEditingId(null);
+  }, [noteId]);
+
+  const widgets = mastheadWidgetsFor(articleType).filter((widget) => !widget.hiddenWhen?.(values));
+  const isEditable = (config: MastheadWidgetConfig) => canEdit && !config.lockedWhen?.(values);
+
+  const coverConfig = widgets.find((widget) => widget.kind === 'cover');
+  const cover = useCoverImagePicker(values.coverImage);
+  const coverEditable = coverConfig != null && isEditable(coverConfig);
+
+  // A paragraph is an offer on the line until it is written; from then on it
+  // stands under the line as the paragraph it is.
+  const standsAlone = (config: MastheadWidgetConfig) =>
+    config.kind === 'paragraph' &&
+    (editingId === config.id || Boolean(values.shortDescription?.trim()));
+
+  // The details with a line to themselves: the authors and the RFP, once
+  // they are set. Until then their offers sit with the other details. A
+  // people picker that is open keeps its line until it closes, rather than
+  // jumping into the row the moment the last name is removed.
+  const onOwnLine = (config: MastheadWidgetConfig) =>
+    (config.ownLineWhen?.(values) ?? false) ||
+    (config.kind === 'people' && editingId === config.id);
+  const ownLine = widgets.filter(onOwnLine);
+
+  const hasValue = (config: MastheadWidgetConfig) =>
+    config.kind === 'cover' ? cover.imageUrl != null : detailValue(config, values) != null;
+  // The shared line, and whether anything on it will show: a detail shows
+  // its value, or an offer to add one when it can be edited.
+  const rowWidgets = widgets.filter(
+    (widget) => widget.kind !== 'cover' && !standsAlone(widget) && !onOwnLine(widget)
+  );
+  const offersCover = coverConfig != null && coverEditable && !cover.imageUrl;
+  const rowShows =
+    offersCover || rowWidgets.some((widget) => isEditable(widget) || hasValue(widget));
+
+  const renderDetail = (config: MastheadWidgetConfig) => {
+    const state = {
+      config,
+      editable: isEditable(config),
+      editing: editingId === config.id,
+      onEditingChange: (editing: boolean) =>
+        setEditingId((current) => {
+          if (editing) return config.id;
+          return current === config.id ? null : current;
+        }),
+    };
+    switch (config.kind) {
+      case 'cover':
+        return null;
+      case 'people':
+        return <PeopleWidget key={config.id} {...state} value={peopleOf(values, config.field)} />;
+      case 'amount':
+        return <AmountWidget key={config.id} {...state} value={values.budget} />;
+      case 'grant':
+        return noteId == null ? null : (
+          <ApplyingToWidget
+            key={config.id}
+            config={config}
+            noteId={noteId}
+            editable={state.editable}
+            editing={state.editing}
+            onEditingChange={state.onEditingChange}
+          />
+        );
+      case 'text':
+        return <TextWidget key={config.id} {...state} value={values.organization} />;
+      case 'paragraph':
+        return <TextWidget key={config.id} {...state} value={values.shortDescription} />;
+    }
+  };
+
+  return (
+    // Indented by the gutter the editor keeps for its block handles (see
+    // `.ai-mode-document .ProseMirror`), so the title and the text under it
+    // share a left edge.
+    <header className="mb-6 ml-16 flex flex-col gap-3 border-b border-gray-200 pb-5">
+      {coverConfig && cover.imageUrl && (
+        <CoverBanner
+          imageUrl={cover.imageUrl}
+          onChange={coverEditable ? cover.browse : undefined}
+          onRemove={coverEditable ? cover.remove : undefined}
+        />
+      )}
+      <MastheadTitle title={title} onRename={canEdit ? onRename : undefined} />
+
+      {/* The byline: its lines sit closer to each other than to the title. */}
+      {(ownLine.length > 0 || rowShows) && (
+        <div className="flex flex-col gap-1.5">
+          {ownLine.map((config) => (
+            <div key={config.id} className={LINE_CLASS}>
+              {renderDetail(config)}
+            </div>
+          ))}
+          {rowShows && (
+            <div className={cn(LINE_CLASS, 'gap-y-1.5')}>
+              {rowWidgets.map(renderDetail)}
+              {offersCover && (
+                <AddDetail
+                  icon={coverConfig.icon}
+                  label={coverConfig.addLabel}
+                  onClick={cover.browse}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      {widgets.filter(standsAlone).map(renderDetail)}
+
+      {cover.error && (
+        <p role="status" className="text-xs text-gray-600">
+          {cover.error}
+        </p>
+      )}
+      {coverEditable && <input {...cover.inputProps} />}
+    </header>
+  );
+}
diff --git a/components/AIMode/document/masthead/MastheadLine.tsx b/components/AIMode/document/masthead/MastheadLine.tsx
new file mode 100644
index 000000000..8f8bedf6e
--- /dev/null
+++ b/components/AIMode/document/masthead/MastheadLine.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { X, type LucideIcon } from 'lucide-react';
+import { cn } from '@/utils/styles';
+
+/** A detail being edited: a small field in the byline's place. The only blue in the masthead. */
+export const EDITING_FIELD_CLASS =
+  'flex items-center gap-2 rounded-lg border border-solid border-primary-600 bg-white px-2.5 ring-[3px] ring-primary-600/15';
+
+/** The text input inside such a field. */
+export const EDITING_INPUT_CLASS =
+  'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-400 focus:outline-none focus:ring-0';
+
+interface AddDetailProps {
+  readonly icon: LucideIcon;
+  /** What to do: "Add cover". */
+  readonly label: string;
+  readonly onClick: () => void;
+}
+
+/**
+ * A detail with no value yet: a quiet icon and what to do, among the
+ * byline's values. Nothing on the document marks it as required; the publish dialog
+ * lists what is still empty when Publish is clicked.
+ */
+export function AddDetail({ icon: Icon, label, onClick }: AddDetailProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="-mx-1 inline-flex items-center gap-1.5 rounded-md px-1 text-gray-500 transition-colors hover:text-gray-900 focus-visible:bg-gray-50 focus-visible:outline-none"
+    >
+      <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      {label}
+    </button>
+  );
+}
+
+interface DetailValueProps {
+  readonly label: string;
+  readonly children: ReactNode;
+  /** Re-opens the detail's editor; absent when the value cannot be changed. */
+  readonly onEdit?: () => void;
+  /** Takes the value away; only a detail the work can publish without offers it. */
+  readonly onClear?: () => void;
+  readonly clearLabel?: string;
+  /** Keep the value on one line and ellipsize it; names wrap instead. */
+  readonly truncate?: boolean;
+}
+
+/**
+ * A detail with a value: its label and the value, like the byline of the
+ * published page. The same for every detail under the title.
+ */
+export function DetailValue({
+  label,
+  children,
+  onEdit,
+  onClear,
+  clearLabel,
+  truncate = false,
+}: DetailValueProps) {
+  const valueClass = cn('min-w-0 text-left font-medium text-gray-900', truncate && 'truncate');
+  return (
+    <span className="group inline-flex min-w-0 max-w-full items-center gap-[5px]">
+      <span className="shrink-0">{label}</span>
+      {onEdit ? (
+        <button
+          type="button"
+          onClick={onEdit}
+          className={cn(
+            valueClass,
+            '-mx-1 rounded-md px-1 transition-colors hover:bg-gray-50 focus-visible:bg-gray-50 focus-visible:outline-none'
+          )}
+        >
+          {children}
+        </button>
+      ) : (
+        <span className={valueClass}>{children}</span>
+      )}
+      {onClear && (
+        <button
+          type="button"
+          onClick={onClear}
+          aria-label={clearLabel}
+          title={clearLabel}
+          className="shrink-0 rounded-md p-0.5 text-gray-400 opacity-0 transition hover:bg-gray-100 hover:text-gray-700 focus-visible:opacity-100 group-hover:opacity-100"
+        >
+          <X className="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      )}
+    </span>
+  );
+}
diff --git a/components/AIMode/document/masthead/MastheadTitle.tsx b/components/AIMode/document/masthead/MastheadTitle.tsx
new file mode 100644
index 000000000..9ececfb5f
--- /dev/null
+++ b/components/AIMode/document/masthead/MastheadTitle.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/utils/styles';
+
+/** The note API's limit. */
+export const MAX_TITLE_LENGTH = 255;
+
+/** A title as it is saved: one line, single spaces, nothing at the ends. */
+export const normalizeTitle = (draft: string): string => draft.replaceAll(/\s+/g, ' ').trim();
+
+const TITLE_CLASS = 'text-[28px] font-bold leading-tight tracking-tight text-gray-900';
+
+interface MastheadTitleProps {
+  readonly title: string;
+  /** Saves a new title; absent where the title cannot be changed. */
+  readonly onRename?: (title: string) => void;
+}
+
+/**
+ * The note's title, as the published page will head it, edited where it
+ * stands: click, type, and Enter or a click away keeps it. Escape puts the
+ * old one back.
+ */
+export function MastheadTitle({ title, onRename }: MastheadTitleProps) {
+  const [draft, setDraft] = useState(title);
+  const [focused, setFocused] = useState(false);
+  const cancelledRef = useRef(false);
+  useEffect(() => {
+    if (!focused) setDraft(title);
+  }, [title, focused]);
+
+  if (!onRename) {
+    return <h1 className={cn(TITLE_CLASS, 'mt-1 break-words')}>{title || 'Untitled'}</h1>;
+  }
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelledRef.current) {
+      cancelledRef.current = false;
+      setDraft(title);
+      return;
+    }
+    const next = normalizeTitle(draft);
+    // A note is never left without a title.
+    if (next && next !== title) onRename(next);
+    else setDraft(title);
+  };
+
+  return (
+    // The hidden copy gives the cell its height, so the field grows with its
+    // text and with the pane's width without measuring anything.
+    <h1 className={cn(TITLE_CLASS, 'mt-1 grid')}>
+      <span
+        aria-hidden="true"
+        className="invisible col-start-1 row-start-1 whitespace-pre-wrap break-words"
+      >
+        {draft || 'Untitled'}{' '}
+      </span>
+      <textarea
+        aria-label="Title"
+        rows={1}
+        value={draft}
+        maxLength={MAX_TITLE_LENGTH}
+        placeholder="Untitled"
+        spellCheck={focused}
+        onChange={(event) => setDraft(event.target.value.replaceAll('\n', ' '))}
+        onFocus={() => setFocused(true)}
+        onBlur={commit}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            event.currentTarget.blur();
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            cancelledRef.current = true;
+            event.currentTarget.blur();
+          }
+        }}
+        className="col-start-1 row-start-1 -mx-1.5 w-[calc(100%+0.75rem)] resize-none overflow-hidden rounded-md border-0 bg-transparent px-1.5 py-0 font-[inherit] tracking-[inherit] text-inherit outline-none transition-colors placeholder:text-gray-400 hover:bg-gray-50 focus:bg-transparent focus:outline-none focus:ring-0"
+      />
+    </h1>
+  );
+}
diff --git a/components/AIMode/document/masthead/PeopleWidget.tsx b/components/AIMode/document/masthead/PeopleWidget.tsx
new file mode 100644
index 000000000..8ef512ddd
--- /dev/null
+++ b/components/AIMode/document/masthead/PeopleWidget.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import { useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Users } from 'lucide-react';
+import type { PublishingFormData, SelectOption } from '@/components/Notebook/PublishingForm/schema';
+import { Avatar } from '@/components/ui/Avatar';
+import type { MultiSelectOption } from '@/components/ui/form/SearchableMultiSelect';
+import { SearchableUserSelect } from '@/components/ui/form/SearchableUserSelect';
+import type { UserSuggestion } from '@/types/search';
+import { cn } from '@/utils/styles';
+import { AddDetail, DetailValue } from './MastheadLine';
+import { joinNames, type MastheadWidgetConfig } from './mastheadWidgets';
+import { useLeaveToCommit } from './useLeaveToCommit';
+
+/** An RFP's contacts are users; a work's authors are author profiles. */
+const getContactId = (user: UserSuggestion) => user.id!.toString();
+
+const renderPerson = (option: MultiSelectOption, { focus }: { focus: boolean }) => (
+  <div
+    className={cn(
+      'flex h-10 cursor-pointer items-center gap-2.5 rounded-[7px] px-2 text-sm text-gray-900',
+      focus && 'bg-gray-100'
+    )}
+  >
+    <Avatar src={option.avatarUrl} alt={option.label} size="xs" disableTooltip />
+    <span className="min-w-0 flex-1 truncate">{option.label}</span>
+  </div>
+);
+
+interface PeopleWidgetProps {
+  readonly config: MastheadWidgetConfig;
+  readonly value: SelectOption[];
+  readonly editable: boolean;
+  readonly editing: boolean;
+  readonly onEditingChange: (editing: boolean) => void;
+}
+
+/** The people on the work: a proposal's authors, an RFP's contacts. Any number of them. */
+export function PeopleWidget({
+  config,
+  value,
+  editable,
+  editing,
+  onEditingChange,
+}: PeopleWidgetProps) {
+  if (editing && editable) {
+    return (
+      <PeopleEditor
+        config={config}
+        value={value}
+        onClose={() => onEditingChange(false)}
+        className="basis-full"
+      />
+    );
+  }
+  if (value.length > 0) {
+    return (
+      <DetailValue label={config.label} onEdit={editable ? () => onEditingChange(true) : undefined}>
+        {joinNames(value.map((person) => person.label))}
+      </DetailValue>
+    );
+  }
+  if (!editable) return null;
+  return (
+    <AddDetail icon={config.icon} label={config.addLabel} onClick={() => onEditingChange(true)} />
+  );
+}
+
+/**
+ * The shared people picker, dressed as a field: the people already added
+ * stay as chips and the search adds another. Each change is the form's at
+ * once; Escape puts back who was there when the field opened.
+ */
+export function PeopleEditor({
+  config,
+  value,
+  onClose,
+  className,
+}: {
+  readonly config: MastheadWidgetConfig;
+  readonly value: SelectOption[];
+  readonly onClose: () => void;
+  readonly className?: string;
+}) {
+  const { setValue } = useFormContext<PublishingFormData>();
+  const field = config.field === 'contacts' ? 'contacts' : 'authors';
+  const write = (people: SelectOption[]) => setValue(field, people, { shouldValidate: true });
+  const openedWithRef = useRef(value);
+  const ref = useRef<HTMLDivElement>(null);
+  useLeaveToCommit(ref, onClose);
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      onKeyDownCapture={(event) => {
+        // Only once the search is empty: with text in it Enter picks a result
+        // and Escape clears it, both the picker's own.
+        const input = event.target;
+        if (!(input instanceof HTMLInputElement) || input.value !== '') return;
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          onClose();
+        } else if (event.key === 'Escape') {
+          event.preventDefault();
+          write(openedWithRef.current);
+          onClose();
+        }
+      }}
+    >
+      <SearchableUserSelect
+        value={value}
+        onChange={write}
+        sortable={field === 'authors'}
+        getOptionValue={field === 'contacts' ? getContactId : undefined}
+        autoFocus
+        placeholder="Search by name…"
+        placeholderWhenFilled="Add another…"
+        leading={<Users className="h-4 w-4 shrink-0 text-gray-600" aria-hidden="true" />}
+        renderOption={renderPerson}
+        className="min-h-10 items-center gap-2 rounded-lg border-primary-600 py-0.5 pl-2.5 pr-2 ring-[3px] ring-primary-600/15 focus-within:border-primary-600 focus-within:ring-[3px] focus-within:ring-primary-600/15"
+        optionsClassName="mt-1.5 rounded-[10px] border border-gray-200 p-1.5 shadow-xl ring-0"
+      />
+    </div>
+  );
+}
diff --git a/components/AIMode/document/details/SelectGrantForNoteModal.tsx b/components/AIMode/document/masthead/SelectGrantForNoteModal.tsx
similarity index 91%
rename from components/AIMode/document/details/SelectGrantForNoteModal.tsx
rename to components/AIMode/document/masthead/SelectGrantForNoteModal.tsx
index 1795eafa9..485e6a892 100644
--- a/components/AIMode/document/details/SelectGrantForNoteModal.tsx
+++ b/components/AIMode/document/masthead/SelectGrantForNoteModal.tsx
@@ -3,7 +3,7 @@
 import { SelectFundingOpportunityModal } from '@/components/modals/SelectFundingOpportunityModal';
 import { useSelectedGrant } from '@/components/Notebook/PublishingForm/useSelectedGrant';
 
-/** A modal a detail block opens for the note it belongs to. */
+/** A modal a masthead widget opens for the note it belongs to. */
 export interface NoteModalProps {
   readonly noteId: number;
   readonly isOpen: boolean;
diff --git a/components/AIMode/document/masthead/TextWidget.tsx b/components/AIMode/document/masthead/TextWidget.tsx
new file mode 100644
index 000000000..066ce7718
--- /dev/null
+++ b/components/AIMode/document/masthead/TextWidget.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AddDetail, DetailValue, EDITING_FIELD_CLASS, EDITING_INPUT_CLASS } from './MastheadLine';
+import type { MastheadWidgetConfig } from './mastheadWidgets';
+import { useLeaveToCommit } from './useLeaveToCommit';
+
+/** The schema's limit on an organization's name. */
+const MAX_LINE_LENGTH = 200;
+
+type TextField = 'organization' | 'shortDescription';
+
+interface TextWidgetProps {
+  readonly config: MastheadWidgetConfig;
+  readonly value: string | undefined;
+  readonly editable: boolean;
+  readonly editing: boolean;
+  readonly onEditingChange: (editing: boolean) => void;
+}
+
+/**
+ * Words the author types: one line after a label (who an RFP is offered
+ * by), or a few sentences that stand as a paragraph (its short description).
+ * Unset, either is an offer in the byline; the masthead gives a paragraph
+ * that is set or being written a place of its own under it.
+ */
+export function TextWidget({ config, value, editable, editing, onEditingChange }: TextWidgetProps) {
+  const text = value?.trim() ?? '';
+  const paragraph = config.kind === 'paragraph';
+  const edit = editable ? () => onEditingChange(true) : undefined;
+
+  if (editing && editable) {
+    const editor = (
+      <TextEditor config={config} initial={text} onClose={() => onEditingChange(false)} />
+    );
+    return paragraph ? (
+      editor
+    ) : (
+      <span className="inline-flex max-w-full items-center gap-[7px]">
+        <span className="shrink-0">{config.label}</span>
+        {editor}
+      </span>
+    );
+  }
+  if (text && paragraph) {
+    const className = 'whitespace-pre-wrap break-words text-[15px] leading-relaxed text-gray-700';
+    return edit ? (
+      <button
+        type="button"
+        onClick={edit}
+        aria-label={`Edit the ${config.label.toLowerCase()}`}
+        className={cn(
+          className,
+          '-mx-1 rounded-md px-1 text-left transition-colors hover:bg-gray-50 focus-visible:bg-gray-50 focus-visible:outline-none'
+        )}
+      >
+        {text}
+      </button>
+    ) : (
+      <p className={className}>{text}</p>
+    );
+  }
+  if (text) {
+    return (
+      <DetailValue label={config.label} onEdit={edit} truncate>
+        {text}
+      </DetailValue>
+    );
+  }
+  if (!edit) return null;
+  return <AddDetail icon={config.icon} label={config.addLabel} onClick={edit} />;
+}
+
+/**
+ * The words as a field: one line, or for a paragraph a box that grows with
+ * its text. Enter or leaving it keeps them, Escape does not.
+ */
+export function TextEditor({
+  config,
+  initial,
+  onClose,
+}: {
+  readonly config: MastheadWidgetConfig;
+  readonly initial: string;
+  readonly onClose: () => void;
+}) {
+  const { setValue } = useFormContext<PublishingFormData>();
+  const field: TextField = config.field === 'organization' ? 'organization' : 'shortDescription';
+  const [draft, setDraft] = useState(initial);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const commit = () => {
+    const next = draft.trim();
+    if (next !== initial) setValue(field, next, { shouldDirty: true, shouldValidate: true });
+    onClose();
+  };
+  useLeaveToCommit(ref, commit);
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    // Shift+Enter still breaks a line in the paragraph.
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      commit();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+    }
+  };
+
+  if (config.kind === 'paragraph') {
+    return (
+      <span ref={ref} className={cn(EDITING_FIELD_CLASS, 'w-full items-start py-2')}>
+        {/* The hidden copy sizes the cell, so the field grows with its text. */}
+        <span className="grid min-w-0 flex-1 text-[15px] leading-relaxed">
+          <span
+            aria-hidden="true"
+            className="invisible col-start-1 row-start-1 min-h-[3lh] whitespace-pre-wrap break-words"
+          >
+            {draft}{' '}
+          </span>
+          <textarea
+            autoFocus
+            aria-label={config.label}
+            placeholder="What this RFP is for and what you are looking to fund"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={handleKeyDown}
+            onFocus={(event) => {
+              const end = event.currentTarget.value.length;
+              event.currentTarget.setSelectionRange(end, end);
+            }}
+            className={cn(
+              EDITING_INPUT_CLASS,
+              'col-start-1 row-start-1 resize-none overflow-hidden text-[15px] leading-relaxed'
+            )}
+          />
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <span ref={ref} className={cn(EDITING_FIELD_CLASS, 'h-8 w-[260px] min-w-0')}>
+      <input
+        autoFocus
+        type="text"
+        aria-label={config.label}
+        placeholder="University, company, foundation…"
+        maxLength={MAX_LINE_LENGTH}
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={handleKeyDown}
+        className={EDITING_INPUT_CLASS}
+      />
+    </span>
+  );
+}
diff --git a/components/AIMode/document/masthead/mastheadWidgets.ts b/components/AIMode/document/masthead/mastheadWidgets.ts
new file mode 100644
index 000000000..b8e2c559b
--- /dev/null
+++ b/components/AIMode/document/masthead/mastheadWidgets.ts
@@ -0,0 +1,197 @@
+import {
+  Building2,
+  DollarSign,
+  FileText,
+  Image as ImageIcon,
+  Target,
+  Users,
+  type LucideIcon,
+} from 'lucide-react';
+import type { PublishingFieldKey } from '@/components/Notebook/PublishingForm/completion';
+import type {
+  ArticleType,
+  PublishingFormData,
+  SelectOption,
+} from '@/components/Notebook/PublishingForm/schema';
+
+/**
+ * How a detail shows its value and how it is edited:
+ * - `cover`: the image across the column, above the title; set from the file picker.
+ * - `people`: names after a label; edited in a search field that keeps chips.
+ * - `amount`: whole US dollars after a label; edited as digits.
+ * - `grant`: the Request for Proposal a proposal answers; picked in a modal.
+ * - `text`: one line after a label.
+ * - `paragraph`: a few sentences that stand as a paragraph under the byline.
+ */
+export type MastheadWidgetKind = 'cover' | 'people' | 'amount' | 'grant' | 'text' | 'paragraph';
+
+export interface MastheadWidgetConfig {
+  readonly id: string;
+  /** The form field the detail shows and edits. */
+  readonly field: PublishingFieldKey;
+  readonly kind: MastheadWidgetKind;
+  /** What the detail is called in the publish dialog's list of what is still empty. */
+  readonly name: string;
+  /** Leads the byline's offer to add the detail while it has no value. */
+  readonly icon: LucideIcon;
+  /** The byline's offer while the detail has no value, said as the thing to do: "Add cover". */
+  readonly addLabel: string;
+  /** What leads the value once it is set: "By Kobe Attias". A cover or a paragraph has none. */
+  readonly label: string;
+  /** Gets a line to itself under the title, above the other details, when this holds. */
+  readonly ownLineWhen?: (values: PublishingFormData) => boolean;
+  /** The detail disappears when this holds. */
+  readonly hiddenWhen?: (values: PublishingFormData) => boolean;
+  /** The value still shows, but can no longer be changed, when this holds. */
+  readonly lockedWhen?: (values: PublishingFormData) => boolean;
+}
+
+const COVER_IMAGE: MastheadWidgetConfig = {
+  id: 'coverImage',
+  field: 'coverImage',
+  kind: 'cover',
+  icon: ImageIcon,
+  name: 'Cover image',
+  addLabel: 'Add cover',
+  label: 'Cover image',
+};
+
+const AUTHORS: MastheadWidgetConfig = {
+  id: 'authors',
+  field: 'authors',
+  kind: 'people',
+  icon: Users,
+  name: 'Authors',
+  addLabel: 'Add authors',
+  label: 'By',
+  // With none there is only the offer to add some, and that sits with the others.
+  ownLineWhen: (values) => values.authors.length > 0,
+};
+
+const FUNDING_GOAL: MastheadWidgetConfig = {
+  id: 'fundingGoal',
+  field: 'budget',
+  kind: 'amount',
+  icon: DollarSign,
+  name: 'Funding goal',
+  addLabel: 'Set funding goal',
+  label: 'Funding goal',
+  // A fundraise that is open keeps the goal it opened with.
+  lockedWhen: (values) => Boolean(values.workId),
+};
+
+const APPLYING_TO: MastheadWidgetConfig = {
+  id: 'applyingTo',
+  field: 'selectedGrant',
+  kind: 'grant',
+  icon: Target,
+  name: 'RFP',
+  addLabel: 'Apply to an RFP',
+  label: 'Applying to',
+  // The offer sits among the other details; the answer gets its own line.
+  ownLineWhen: (values) => values.selectedGrant != null,
+  // The answer to a Request for Proposal cannot change once published.
+  hiddenWhen: (values) => Boolean(values.workId),
+};
+
+const ORGANIZATION: MastheadWidgetConfig = {
+  id: 'organization',
+  field: 'organization',
+  kind: 'text',
+  icon: Building2,
+  name: 'Organization',
+  addLabel: 'Add organization',
+  label: 'Offered by',
+};
+
+const FUNDING_AMOUNT: MastheadWidgetConfig = {
+  id: 'fundingAmount',
+  field: 'budget',
+  kind: 'amount',
+  icon: DollarSign,
+  name: 'Funding amount',
+  addLabel: 'Set funding amount',
+  label: 'Funding amount',
+};
+
+const CONTACTS: MastheadWidgetConfig = {
+  id: 'contacts',
+  field: 'contacts',
+  kind: 'people',
+  icon: Users,
+  name: 'Contact',
+  addLabel: 'Add contact',
+  label: 'Contact',
+};
+
+const SHORT_DESCRIPTION: MastheadWidgetConfig = {
+  id: 'shortDescription',
+  field: 'shortDescription',
+  kind: 'paragraph',
+  icon: FileText,
+  name: 'Short description',
+  addLabel: 'Add short description',
+  label: 'Short description',
+};
+
+/**
+ * In the order the byline keeps, lines of their own first. The cover is not
+ * part of the byline once it is set, and its offer to add one comes last.
+ */
+const WIDGETS_BY_TYPE: Record<ArticleType, readonly MastheadWidgetConfig[]> = {
+  preregistration: [COVER_IMAGE, AUTHORS, FUNDING_GOAL, APPLYING_TO],
+  grant: [COVER_IMAGE, ORGANIZATION, FUNDING_AMOUNT, CONTACTS, SHORT_DESCRIPTION],
+  registered_report: [COVER_IMAGE, AUTHORS],
+  discussion: [AUTHORS],
+};
+
+/** The details a work of this type carries in its masthead. */
+export function mastheadWidgetsFor(
+  articleType: ArticleType | undefined
+): readonly MastheadWidgetConfig[] {
+  return articleType ? WIDGETS_BY_TYPE[articleType] : [];
+}
+
+/** "A", "A and B", "A, B and C". */
+export function joinNames(names: readonly string[]): string {
+  if (names.length <= 1) return names[0] ?? '';
+  return `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]}`;
+}
+
+export const peopleOf = (values: PublishingFormData, field: PublishingFieldKey): SelectOption[] => {
+  const people = values[field];
+  return Array.isArray(people) ? (people as SelectOption[]) : [];
+};
+
+/** `50000` as `$50,000`; null while there is no amount. */
+export function formatAmount(budget: string | undefined): string | null {
+  const value = Number(budget);
+  return value > 0 ? `$${value.toLocaleString('en-US')}` : null;
+}
+
+/**
+ * A detail's value as the byline and the publish dialog show it, or null
+ * while it has none. The cover is a picture, not text: null here, and read
+ * by whoever shows it.
+ */
+export function detailValue(
+  config: MastheadWidgetConfig,
+  values: PublishingFormData
+): string | null {
+  switch (config.kind) {
+    case 'cover':
+      return null;
+    case 'people': {
+      const people = peopleOf(values, config.field);
+      return people.length > 0 ? joinNames(people.map((person) => person.label)) : null;
+    }
+    case 'amount':
+      return formatAmount(values.budget);
+    case 'grant':
+      return values.selectedGrant?.shortTitle ?? null;
+    case 'text':
+      return values.organization?.trim() || null;
+    case 'paragraph':
+      return values.shortDescription?.trim() || null;
+  }
+}
diff --git a/components/AIMode/document/masthead/useLeaveToCommit.ts b/components/AIMode/document/masthead/useLeaveToCommit.ts
new file mode 100644
index 000000000..44ad303f8
--- /dev/null
+++ b/components/AIMode/document/masthead/useLeaveToCommit.ts
@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, useRef, type RefObject } from 'react';
+
+/**
+ * Calls `onLeave` when the user clicks or tabs out of an editor. A widget's
+ * editor is taller than the line it becomes, so leaving on blur would shift
+ * the page between the press and the release of the very click that caused
+ * it, and the click would land on something else. This waits for the click
+ * to finish.
+ */
+export function useLeaveToCommit(ref: RefObject<HTMLElement | null>, onLeave: () => void) {
+  const onLeaveRef = useRef(onLeave);
+  onLeaveRef.current = onLeave;
+
+  useEffect(() => {
+    const isInside = (target: EventTarget | null) =>
+      target instanceof Node && Boolean(ref.current?.contains(target));
+
+    let pointerDown = false;
+    let pressedOutside = false;
+    const handlePointerDown = (event: PointerEvent) => {
+      pointerDown = true;
+      pressedOutside = !isInside(event.target);
+    };
+    const handleClick = (event: MouseEvent) => {
+      // A drag that began inside (selecting text) and ended outside is not a click away.
+      const leaving = pressedOutside && !isInside(event.target);
+      pointerDown = false;
+      pressedOutside = false;
+      if (leaving) onLeaveRef.current();
+    };
+    // Focus moved out by the keyboard; a pointer's focus change is the click's to handle.
+    const handleFocusIn = (event: FocusEvent) => {
+      if (!pointerDown && !isInside(event.target)) onLeaveRef.current();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    document.addEventListener('click', handleClick, true);
+    document.addEventListener('focusin', handleFocusIn, true);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('focusin', handleFocusIn, true);
+    };
+  }, [ref]);
+}
diff --git a/components/AIMode/document/masthead/usePublishReadiness.ts b/components/AIMode/document/masthead/usePublishReadiness.ts
new file mode 100644
index 000000000..8f18725af
--- /dev/null
+++ b/components/AIMode/document/masthead/usePublishReadiness.ts
@@ -0,0 +1,23 @@
+import { MIN_PUBLISH_TITLE_LENGTH } from '@/components/modals/ConfirmPublishModal';
+import { usePublishingCompletion } from '@/components/Notebook/PublishingForm';
+import type { PublishingFieldKey } from '@/components/Notebook/PublishingForm/completion';
+
+export interface PublishReadiness {
+  /** The required details still missing, each once, in the schema's order. */
+  readonly missing: readonly PublishingFieldKey[];
+  /** The title is shorter than a published work's may be. */
+  readonly titleTooShort: boolean;
+  /** Nothing stands between the document and being published. */
+  readonly ready: boolean;
+}
+
+/**
+ * What the open document still needs before it can be published. Nothing on
+ * the document says so; the publish dialog asks, lists it, and lets it be
+ * filled in there. Renders inside the note's `PublishingFormProvider`.
+ */
+export function usePublishReadiness(title: string): PublishReadiness {
+  const { missing } = usePublishingCompletion();
+  const titleTooShort = title.trim().length < MIN_PUBLISH_TITLE_LENGTH;
+  return { missing, titleTooShort, ready: missing.length === 0 && !titleTooShort };
+}
diff --git a/components/AIMode/document/useAIModeDocument.ts b/components/AIMode/document/useAIModeDocument.ts
index 072b75dc0..bdc2c0d25 100644
--- a/components/AIMode/document/useAIModeDocument.ts
+++ b/components/AIMode/document/useAIModeDocument.ts
@@ -32,6 +32,13 @@ export interface AIModeDocument {
    * reach the editor through the review, not through a reload here.
    */
   readonly content: NoteWithContent | null;
+  /**
+   * The note's title as it stands: what it loaded with, or what the user has
+   * renamed it to since. Empty while it is not known yet.
+   */
+  readonly title: string;
+  /** Shows a new title at once. Saving it is the caller's, through the note's details writer. */
+  readonly rename: (title: string) => void;
   readonly loading: boolean;
   readonly error: string | null;
   readonly status: DocumentStatus;
@@ -96,6 +103,9 @@ export function useAIModeDocument({
   const [content, setContent] = useState<NoteWithContent | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // Kept beside the loaded note rather than written into it: the editor and
+  // the review are seeded from that object and must not see it change.
+  const [renamed, setRenamed] = useState<{ noteId: number; title: string } | null>(null);
   const seqRef = useRef(0);
 
   const fetchNote = useCallback(async () => {
@@ -133,6 +143,19 @@ export function useAIModeDocument({
 
   const hasWrittenVersion = (content != null && content.versionId > 0) || chatHasEditedNote(chat);
 
+  const rename = useCallback(
+    (title: string) => {
+      if (noteId != null) setRenamed({ noteId, title });
+    },
+    [noteId]
+  );
+  const title = (
+    (renamed?.noteId === noteId ? renamed?.title : null) ??
+    content?.title ??
+    note?.title ??
+    ''
+  ).trim();
+
   const status: DocumentStatus = useMemo(() => {
     if (noteId == null) return 'absent';
     if (draftText != null) return 'drafting';
@@ -144,6 +167,8 @@ export function useAIModeDocument({
   return {
     note,
     content,
+    title,
+    rename,
     loading,
     error,
     status,
diff --git a/components/AIMode/shell/AIModeHeader.tsx b/components/AIMode/shell/AIModeHeader.tsx
deleted file mode 100644
index cc4e85acc..000000000
--- a/components/AIMode/shell/AIModeHeader.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client';
-
-import { PanelLeft } from 'lucide-react';
-import { cn } from '@/utils/styles';
-
-interface AIModeHeaderProps {
-  /**
-   * What is open: the conversation's title when the chat is the main pane,
-   * the document's when it is, "New RFP" or "New proposal" on the start screen.
-   */
-  readonly title: string;
-  /** Receives the element the document pane renders its publish controls into. */
-  readonly publishControlsRef?: (element: HTMLDivElement | null) => void;
-  /**
-   * Shows or hides the conversations and drafts while the app's left column
-   * is an icon rail with no room for them; absent once the column holds them.
-   */
-  readonly onToggleList?: () => void;
-  readonly listOpen?: boolean;
-}
-
-/**
- * The workspace's strip, under the app's top bar: what is open, and the open
- * document's publishing state. The way out is the top bar's back arrow.
- */
-export function AIModeHeader({
-  title,
-  publishControlsRef,
-  onToggleList,
-  listOpen = false,
-}: AIModeHeaderProps) {
-  const listLabel = listOpen
-    ? 'Hide conversations and documents'
-    : 'Show conversations and documents';
-  return (
-    // The top bar's gutters, so the title sits under its back arrow and the
-    // publish controls under its user controls.
-    <header className="flex h-12 shrink-0 items-center justify-between gap-4 border-b border-gray-200 bg-white px-4 lg:px-8">
-      <div className="flex min-w-0 items-center gap-2">
-        {onToggleList && (
-          <button
-            type="button"
-            onClick={onToggleList}
-            aria-pressed={listOpen}
-            aria-label={listLabel}
-            title={listLabel}
-            className={cn(
-              'inline-flex shrink-0 items-center justify-center rounded-lg p-1.5 transition-colors sidebar-compact:!hidden',
-              listOpen
-                ? 'bg-primary-50 text-primary-700 hover:bg-primary-100'
-                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
-            )}
-          >
-            <PanelLeft className="h-4 w-4" aria-hidden="true" />
-          </button>
-        )}
-        <h1 className="min-w-0 truncate text-base font-semibold tracking-tight text-gray-900">
-          {title}
-        </h1>
-      </div>
-      {publishControlsRef && (
-        <div ref={publishControlsRef} className="flex shrink-0 items-center" />
-      )}
-    </header>
-  );
-}
diff --git a/components/AIMode/shell/WorkspacePanes.tsx b/components/AIMode/shell/WorkspacePanes.tsx
index c0111066c..112451488 100644
--- a/components/AIMode/shell/WorkspacePanes.tsx
+++ b/components/AIMode/shell/WorkspacePanes.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { PanelLeft } from 'lucide-react';
+import { PanelLeftOpen } from 'lucide-react';
 import { PublishMenu } from '@/app/layouts/PublishMenu';
 import { ResizeHandle } from '@/components/ui/ResizeHandle';
 import { SwipeableDrawer } from '@/components/ui/SwipeableDrawer';
@@ -97,7 +97,7 @@ export function WorkspacePanes({
                 aria-pressed="true"
                 className="flex h-11 w-11 items-center justify-center rounded-lg text-primary-700"
               >
-                <PanelLeft className="h-[18px] w-[18px]" />
+                <PanelLeftOpen className="h-[18px] w-[18px]" />
               </button>
               <h2 className="text-sm font-medium text-gray-800">Conversations and documents</h2>
             </div>
@@ -111,7 +111,7 @@ export function WorkspacePanes({
 
         {/* Between the tablet breakpoint and the width at which the left
             column holds the lists, they slide over the panes from its edge.
-            The strip's button, which stays clear of the scrim, also closes it. */}
+            The top bar's button, which stays clear of the scrim, also closes it. */}
         {showLists && !isBelowTablet && (
           <>
             <div
diff --git a/components/AIMode/shell/WorkspaceTopBar.tsx b/components/AIMode/shell/WorkspaceTopBar.tsx
new file mode 100644
index 000000000..c99bb9572
--- /dev/null
+++ b/components/AIMode/shell/WorkspaceTopBar.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+import { PanelLeftOpen } from 'lucide-react';
+import { useTopBarSlot } from '@/contexts/TopBarSlotContext';
+import { cn } from '@/utils/styles';
+
+interface WorkspaceTopBarProps {
+  /**
+   * What is open: the conversation's title when the chat is the main pane,
+   * the document's when it is, "New RFP" or "New proposal" on the start screen.
+   */
+  readonly title: string;
+  /**
+   * Shows or hides the conversations and drafts while the app's left column
+   * is an icon rail with no room for them; absent once the column holds
+   * them, and on a phone, where the chat's header has the button.
+   */
+  readonly onToggleList?: () => void;
+  readonly listOpen?: boolean;
+}
+
+/**
+ * Puts the workspace's open title in the app's top bar, beside the back
+ * arrow, where the page's own name would be. Renders nothing itself: the top
+ * bar's slots live inside `PageLayout`, so this sits among the page's
+ * children and hands the title up from there.
+ */
+export function WorkspaceTopBar({ title, onToggleList, listOpen = false }: WorkspaceTopBarProps) {
+  const slot = useTopBarSlot();
+  const setTitle = slot?.setTitle;
+  const setLeading = slot?.setLeading;
+
+  useEffect(() => {
+    setTitle?.(title);
+  }, [setTitle, title]);
+  useEffect(() => () => setTitle?.(null), [setTitle]);
+
+  const listButton = useMemo(() => {
+    if (!onToggleList) return null;
+    const label = listOpen
+      ? 'Hide conversations and documents'
+      : 'Show conversations and documents';
+    return (
+      <button
+        type="button"
+        onClick={onToggleList}
+        aria-pressed={listOpen}
+        aria-label={label}
+        title={label}
+        className={cn(
+          'mr-2 hidden shrink-0 items-center justify-center rounded-lg p-1.5 transition-colors tablet:!inline-flex sidebar-compact:!hidden',
+          listOpen
+            ? 'bg-primary-50 text-primary-700 hover:bg-primary-100'
+            : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
+        )}
+      >
+        <PanelLeftOpen className="h-[18px] w-[18px]" aria-hidden="true" />
+      </button>
+    );
+  }, [onToggleList, listOpen]);
+
+  useEffect(() => {
+    setLeading?.(listButton);
+  }, [setLeading, listButton]);
+  useEffect(() => () => setLeading?.(null), [setLeading]);
+
+  return null;
+}
diff --git a/components/AIMode/sidebar/DraftsSection.tsx b/components/AIMode/sidebar/DraftsSection.tsx
index c3ae0ad23..a78c51887 100644
--- a/components/AIMode/sidebar/DraftsSection.tsx
+++ b/components/AIMode/sidebar/DraftsSection.tsx
@@ -16,6 +16,8 @@ interface DraftsSectionProps {
   readonly activeNoteId: number | null;
   /** A note the open conversation just created; the list fetches again to show it. */
   readonly recentNoteId: number | null;
+  /** The open document and its title as it stands; its row follows a rename. */
+  readonly openNote?: { readonly id: number; readonly title: string } | null;
   readonly onSelect: (noteId: number) => void;
 }
 
@@ -37,7 +39,12 @@ function DraftIcon({ note }: { readonly note: Note }) {
  * open, newest first, published or not. Opening one puts the document in
  * the main pane with a fresh chat beside it.
  */
-export function DraftsSection({ activeNoteId, recentNoteId, onSelect }: DraftsSectionProps) {
+export function DraftsSection({
+  activeNoteId,
+  recentNoteId,
+  openNote = null,
+  onSelect,
+}: DraftsSectionProps) {
   const { selectedOrg, isLoading: isLoadingOrg } = useOrganizationContext();
   const { user } = useUser();
   const notes = useOrganizationNotes(selectedOrg?.slug, { waiting: isLoadingOrg });
@@ -66,6 +73,20 @@ export function DraftsSection({ activeNoteId, recentNoteId, onSelect }: DraftsSe
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [recentNoteId, known]);
 
+  // The open document was renamed in its masthead: its row says so at once,
+  // and keeps saying so after another document is opened.
+  const { setNotes } = notes;
+  const openNoteId = openNote?.id ?? null;
+  const openNoteTitle = openNote?.title ?? '';
+  useEffect(() => {
+    if (openNoteId == null || !openNoteTitle) return;
+    setNotes((current) =>
+      current.some((note) => note.id === openNoteId && note.title !== openNoteTitle)
+        ? current.map((note) => (note.id === openNoteId ? { ...note, title: openNoteTitle } : note))
+        : current
+    );
+  }, [openNoteId, openNoteTitle, setNotes, notes.notes]);
+
   return (
     <section aria-label="Drafts">
       <SidebarGroupHeading>Drafts</SidebarGroupHeading>
diff --git a/components/AIMode/sidebar/WorkspaceSidebar.tsx b/components/AIMode/sidebar/WorkspaceSidebar.tsx
index 963b6d2e0..772e2e3d5 100644
--- a/components/AIMode/sidebar/WorkspaceSidebar.tsx
+++ b/components/AIMode/sidebar/WorkspaceSidebar.tsx
@@ -7,6 +7,8 @@ import { DraftsSection } from './DraftsSection';
 
 interface WorkspaceSidebarProps {
   readonly state: AIModeChatState;
+  /** The document that is open and its title as it stands, for the Drafts row to follow a rename. */
+  readonly openNote?: { readonly id: number; readonly title: string } | null;
   /** Runs after any choice that should put a drawer away. */
   readonly onNavigate?: () => void;
 }
@@ -16,7 +18,7 @@ interface WorkspaceSidebarProps {
  * conversation of your own, or open a draft. Starting a new one is the
  * Publish button above them.
  */
-export function WorkspaceSidebar({ state, onNavigate }: WorkspaceSidebarProps) {
+export function WorkspaceSidebar({ state, openNote = null, onNavigate }: WorkspaceSidebarProps) {
   const { selectDocument } = useAIMode();
   const { target, chatId, list } = state;
   // The workspace does not admit this user: the reason stands alone, without
@@ -51,6 +53,7 @@ export function WorkspaceSidebar({ state, onNavigate }: WorkspaceSidebarProps) {
                 target.kind === 'document' && target.layout === 'document' ? target.noteId : null
               }
               recentNoteId={target.kind === 'conversation' ? (state.note?.id ?? null) : null}
+              openNote={openNote}
               onSelect={(noteId) => {
                 selectDocument(noteId);
                 onNavigate?.();
diff --git a/components/Nonprofit/EndaomentInfoPopover.tsx b/components/Nonprofit/EndaomentInfoPopover.tsx
index 196301aad..349539f11 100644
--- a/components/Nonprofit/EndaomentInfoPopover.tsx
+++ b/components/Nonprofit/EndaomentInfoPopover.tsx
@@ -67,7 +67,7 @@ export function EndaomentInfoPopover({
 
   return (
     <div
-      className="endaoment-info-popover fixed z-50 w-96 bg-white rounded-lg shadow-xl border border-gray-200"
+      className="endaoment-info-popover fixed z-[10000] w-96 bg-white rounded-lg shadow-xl border border-gray-200"
       style={{
         top: `${position.top}px`,
         left: `${position.left}px`,
diff --git a/components/Nonprofit/NonprofitInfoPopover.tsx b/components/Nonprofit/NonprofitInfoPopover.tsx
index 6dc02593c..dfce04fd1 100644
--- a/components/Nonprofit/NonprofitInfoPopover.tsx
+++ b/components/Nonprofit/NonprofitInfoPopover.tsx
@@ -33,7 +33,7 @@ export function NonprofitInfoPopover({ nonprofit, position, onClose }: Nonprofit
   return (
     <div
       ref={popoverRef}
-      className="nonprofit-info-popover fixed z-50 w-80 bg-white rounded-lg shadow-xl border border-gray-200 max-h-[60vh] flex flex-col"
+      className="nonprofit-info-popover fixed z-[10000] w-80 bg-white rounded-lg shadow-xl border border-gray-200 max-h-[60vh] flex flex-col"
       style={{
         top: `${position.top}px`,
         left: `${position.left}px`,
diff --git a/components/Nonprofit/NonprofitSearchSection.tsx b/components/Nonprofit/NonprofitSearchSection.tsx
index 7217379c8..d986d1254 100644
--- a/components/Nonprofit/NonprofitSearchSection.tsx
+++ b/components/Nonprofit/NonprofitSearchSection.tsx
@@ -216,7 +216,7 @@ function NonprofitSearchSectionInner({
 
       {/* Nonprofit Info Dialog */}
       <Transition show={showInfoDialog && !!selectedInfoNonprofit} as={Fragment}>
-        <Dialog as="div" className="relative z-50" onClose={() => setShowInfoDialog(false)}>
+        <Dialog as="div" className="relative z-[10000]" onClose={() => setShowInfoDialog(false)}>
           <Transition.Child
             as={Fragment}
             enter="transition-opacity duration-200"
@@ -330,7 +330,7 @@ function NonprofitSearchSectionInner({
 
       {/* Endaoment Info Dialog */}
       <Transition show={showEndaomentInfo} as={Fragment}>
-        <Dialog as="div" className="relative z-50" onClose={() => setShowEndaomentInfo(false)}>
+        <Dialog as="div" className="relative z-[10000]" onClose={() => setShowEndaomentInfo(false)}>
           <Transition.Child
             as={Fragment}
             enter="transition-opacity duration-200"
diff --git a/components/Notebook/PublishingForm/PublishingFormProvider.tsx b/components/Notebook/PublishingForm/PublishingFormProvider.tsx
index 090c12721..a76480058 100644
--- a/components/Notebook/PublishingForm/PublishingFormProvider.tsx
+++ b/components/Notebook/PublishingForm/PublishingFormProvider.tsx
@@ -55,6 +55,20 @@ const PublishingControllerContext = createContext<PublishingController | null>(n
 
 interface PublishingFormProviderProps {
   readonly readOnly?: boolean;
+  /**
+   * The title the work is published under, for a host that keeps it outside
+   * the document (the workspace shows the note's own title above the text).
+   * Without it the title is the document's first heading, which the
+   * confirmation edits in place: the notebook.
+   */
+  readonly publishTitle?: string;
+  /**
+   * The host's own publish confirmation, shown in place of the notebook's
+   * dialog as soon as publishing is asked for. Nothing is validated first:
+   * it reads the form and the flow from `usePublishingController()`, shows
+   * what is still missing, and is where a nonprofit is chosen and confirmed.
+   */
+  readonly publishConfirmation?: ReactNode;
   readonly children: ReactNode;
 }
 
@@ -67,6 +81,8 @@ interface PublishingFormProviderProps {
  */
 export function PublishingFormProvider({
   readOnly = false,
+  publishTitle,
+  publishConfirmation,
   children,
 }: PublishingFormProviderProps) {
   const { note, editor, saveDetailsSoon, saveDetailsNow } = usePublishingHost();
@@ -177,6 +193,8 @@ export function PublishingFormProvider({
     isChangelog,
     canPublishChangelog,
     canPublishRegisteredReport,
+    titleInDocument: publishTitle === undefined,
+    hostConfirms: publishConfirmation !== undefined,
   });
 
   const canPublish =
@@ -227,22 +245,28 @@ export function PublishingFormProvider({
           />
         )}
 
-        {action.pendingConfirmation === 'publish' && (
-          <ConfirmPublishModal
-            isOpen
-            onClose={action.dismissConfirmation}
-            onConfirm={action.confirmPublish}
-            title={
-              getDocumentTitleFromEditor(editor) ||
-              (isChangelog ? 'Untitled ChangeLog' : 'Untitled Research')
-            }
-            isPublishing={action.isPublishing}
-            isUpdate={Boolean(workId)}
-            onTitleChange={(title) => setDocumentTitle(editor, title)}
-            variant={articleType === 'grant' ? 'rfp' : 'default'}
-            documentLabel={isChangelog ? 'ChangeLog entry' : undefined}
-          />
-        )}
+        {action.pendingConfirmation === 'publish' &&
+          (publishConfirmation !== undefined ? (
+            publishConfirmation
+          ) : (
+            <ConfirmPublishModal
+              isOpen
+              onClose={action.dismissConfirmation}
+              onConfirm={action.confirmPublish}
+              title={
+                publishTitle ??
+                (getDocumentTitleFromEditor(editor) ||
+                  (isChangelog ? 'Untitled ChangeLog' : 'Untitled Research'))
+              }
+              isPublishing={action.isPublishing}
+              isUpdate={Boolean(workId)}
+              onTitleChange={
+                publishTitle === undefined ? (title) => setDocumentTitle(editor, title) : undefined
+              }
+              variant={articleType === 'grant' ? 'rfp' : 'default'}
+              documentLabel={isChangelog ? 'ChangeLog entry' : undefined}
+            />
+          ))}
       </FormProvider>
     </PublishingControllerContext.Provider>
   );
diff --git a/components/Notebook/PublishingForm/components/GrantApplicationVisibilitySection.tsx b/components/Notebook/PublishingForm/components/GrantApplicationVisibilitySection.tsx
index 14e4b253c..0e3eb5c3a 100644
--- a/components/Notebook/PublishingForm/components/GrantApplicationVisibilitySection.tsx
+++ b/components/Notebook/PublishingForm/components/GrantApplicationVisibilitySection.tsx
@@ -12,7 +12,8 @@ const CommunityMatchBadge = () => (
   </CommunityMatchTooltip>
 );
 
-const OPTIONS = [
+/** How an RFP lets its applicants submit; shared with the workspace's publish dialog. */
+export const GRANT_APPLICATION_VISIBILITY_OPTIONS = [
   {
     value: 'OPTIONAL',
     label: 'Applicant chooses',
@@ -41,7 +42,7 @@ export function GrantApplicationVisibilitySection() {
       <p className="mb-2 text-sm text-gray-500">Choose how applicants submit proposals</p>
       <div className="mt-2">
         <RadioGroup
-          options={OPTIONS}
+          options={GRANT_APPLICATION_VISIBILITY_OPTIONS}
           value={value}
           onChange={(next) => setValue('applicationVisibility', next, { shouldValidate: true })}
           size="sm"
diff --git a/components/Notebook/PublishingForm/components/PreregistrationPrivacySection.tsx b/components/Notebook/PublishingForm/components/PreregistrationPrivacySection.tsx
index d3f24d8fa..246ad6057 100644
--- a/components/Notebook/PublishingForm/components/PreregistrationPrivacySection.tsx
+++ b/components/Notebook/PublishingForm/components/PreregistrationPrivacySection.tsx
@@ -16,7 +16,8 @@ const OPTIONS = [
   },
 ];
 
-function useIsLockedPrivate() {
+/** The chosen RFP only takes private proposals, so the proposal cannot be public. */
+export function useIsLockedPrivate() {
   const { watch } = useFormContext();
   const selectedGrant = watch('selectedGrant');
   return selectedGrant?.applicationVisibility === 'PRIVATE';
diff --git a/components/Notebook/PublishingForm/components/WorkImageSection.tsx b/components/Notebook/PublishingForm/components/WorkImageSection.tsx
index be79f6499..620d78430 100644
--- a/components/Notebook/PublishingForm/components/WorkImageSection.tsx
+++ b/components/Notebook/PublishingForm/components/WorkImageSection.tsx
@@ -1,15 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { Image as ImageIcon, Plus, X } from 'lucide-react';
 import { SectionHeader } from './SectionHeader';
 import { cn } from '@/utils/styles';
 import type { SectionProps } from './SectionProps';
 import { PublishingFormData } from '../schema';
-import { useAssetUpload } from '@/hooks/useAssetUpload';
-
-const ACCEPT = ['image/jpeg', 'image/png'];
-const MAX_SIZE_MB = 10;
+import {
+  COVER_IMAGE_ACCEPT,
+  COVER_IMAGE_MAX_MB,
+  coverImageFileError,
+  useCoverImageUpload,
+} from '../useCoverImageUpload';
 
 const isValidFile = (file: unknown): file is File =>
   Boolean(file instanceof File && file.name && file.size > 0);
@@ -17,12 +18,11 @@ const isValidFile = (file: unknown): file is File =>
 export function WorkImageSection({ className }: SectionProps) {
   const {
     control,
-    getValues,
     formState: { errors },
   } = useFormContext<PublishingFormData>();
 
   const [error, setError] = useState<string | null>(null);
-  const [, uploadAsset] = useAssetUpload();
+  const coverImage = useCoverImageUpload();
 
   return (
     <div className={cn('py-3 px-6', className)}>
@@ -39,30 +39,13 @@ export function WorkImageSection({ className }: SectionProps) {
               file={file}
               existingUrl={existingUrl}
               error={error || (errors.coverImage?.message as string) || null}
-              onSelect={async (selected) => {
+              onSelect={(selected) => {
                 setError(null);
-                const previousCover = field.value ?? null;
-                // Show the pick right away, then swap in what the server stored.
-                field.onChange({ file: selected, key: null, url: null });
-
-                const uploaded = await uploadAsset(selected, 'post').catch((uploadError) => {
-                  console.error('Error uploading cover image:', uploadError);
-                  return null;
-                });
-
-                // Ignore this upload if its selection was removed or replaced while it ran.
-                if (getValues('coverImage')?.file !== selected) return;
-
-                if (!uploaded) {
-                  field.onChange(previousCover);
-                  toast.error('Failed to upload image. Please try again.');
-                  return;
-                }
-                field.onChange({ file: null, key: uploaded.objectKey, url: uploaded.absoluteUrl });
+                void coverImage.select(selected);
               }}
               onRemove={() => {
                 setError(null);
-                field.onChange(null);
+                coverImage.remove();
               }}
               onError={setError}
             />
@@ -109,12 +92,9 @@ function CoverImageControl({
     const picked = e.target.files?.[0];
     e.target.value = ''; // allow re-selecting the same file
     if (!picked) return;
-    if (!ACCEPT.includes(picked.type)) {
-      onError('Only JPG or PNG files are accepted');
-      return;
-    }
-    if (picked.size > MAX_SIZE_MB * 1024 * 1024) {
-      onError(`Image must be under ${MAX_SIZE_MB}MB`);
+    const fileError = coverImageFileError(picked);
+    if (fileError) {
+      onError(fileError);
       return;
     }
     onSelect(picked);
@@ -153,7 +133,7 @@ function CoverImageControl({
             Add cover image
           </button>
           {!error && (
-            <p className="mt-1 text-xs text-gray-500">JPG or PNG · up to {MAX_SIZE_MB}MB</p>
+            <p className="mt-1 text-xs text-gray-500">JPG or PNG · up to {COVER_IMAGE_MAX_MB}MB</p>
           )}
         </>
       )}
@@ -162,7 +142,7 @@ function CoverImageControl({
         data-testid="cover-image-input"
         ref={inputRef}
         type="file"
-        accept={ACCEPT.join(',')}
+        accept={COVER_IMAGE_ACCEPT.join(',')}
         onChange={handleChange}
         className="hidden"
       />
diff --git a/components/Notebook/PublishingForm/useCoverImageUpload.ts b/components/Notebook/PublishingForm/useCoverImageUpload.ts
new file mode 100644
index 000000000..050f74a8d
--- /dev/null
+++ b/components/Notebook/PublishingForm/useCoverImageUpload.ts
@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { useAssetUpload } from '@/hooks/useAssetUpload';
+import type { PublishingFormData } from './schema';
+
+export const COVER_IMAGE_ACCEPT = ['image/jpeg', 'image/png'];
+export const COVER_IMAGE_MAX_MB = 10;
+
+/** Why this file cannot be a cover image, or null when it can. */
+export function coverImageFileError(file: File): string | null {
+  if (!COVER_IMAGE_ACCEPT.includes(file.type)) return 'Only JPG or PNG files are accepted';
+  if (file.size > COVER_IMAGE_MAX_MB * 1024 * 1024) {
+    return `Image must be under ${COVER_IMAGE_MAX_MB}MB`;
+  }
+  return null;
+}
+
+/**
+ * Sets the surrounding publishing form's cover image from a picked file: the
+ * pick shows at once, and is swapped for what the server stored when the
+ * upload returns. Whatever control picks the file, the form ends up the same.
+ */
+export function useCoverImageUpload() {
+  const { getValues, setValue } = useFormContext<PublishingFormData>();
+  const [, uploadAsset] = useAssetUpload();
+
+  const write = useCallback(
+    (value: PublishingFormData['coverImage']) =>
+      setValue('coverImage', value, { shouldDirty: true, shouldTouch: true, shouldValidate: true }),
+    [setValue]
+  );
+
+  const select = async (selected: File) => {
+    const previousCover = getValues('coverImage') ?? null;
+    // Show the pick right away, then swap in what the server stored.
+    write({ file: selected, key: null, url: null });
+
+    const uploaded = await uploadAsset(selected, 'post').catch((uploadError) => {
+      console.error('Error uploading cover image:', uploadError);
+      return null;
+    });
+
+    // Ignore this upload if its selection was removed or replaced while it ran.
+    if (getValues('coverImage')?.file !== selected) return;
+
+    if (!uploaded) {
+      write(previousCover);
+      toast.error('Failed to upload image. Please try again.');
+      return;
+    }
+    write({ file: null, key: uploaded.objectKey, url: uploaded.absoluteUrl });
+  };
+
+  const remove = useCallback(() => write(null), [write]);
+
+  return { select, remove };
+}
diff --git a/components/Notebook/PublishingForm/usePublishAction.ts b/components/Notebook/PublishingForm/usePublishAction.ts
index 22fe512b5..af06ea78e 100644
--- a/components/Notebook/PublishingForm/usePublishAction.ts
+++ b/components/Notebook/PublishingForm/usePublishAction.ts
@@ -40,6 +40,20 @@ interface PublishActionOptions {
   readonly isChangelog: boolean;
   readonly canPublishChangelog: boolean;
   readonly canPublishRegisteredReport: boolean;
+  /**
+   * The title is the document's first heading, so the one confirmed is
+   * written back into it. Off for a host that keeps the title outside the
+   * document: there the first heading is a section and is left alone.
+   */
+  readonly titleInDocument: boolean;
+  /**
+   * The host shows its own confirmation, which is where whatever is still
+   * missing gets filled in and where a nonprofit is chosen. A request to
+   * publish then opens it straight away, without the validation that names
+   * each missing field in a toast; the work is validated when that
+   * confirmation is confirmed, and the nonprofit is the host's to confirm.
+   */
+  readonly hostConfirms: boolean;
 }
 
 export interface PublishAction {
@@ -74,6 +88,8 @@ export function usePublishAction({
   isChangelog,
   canPublishChangelog,
   canPublishRegisteredReport,
+  titleInDocument,
+  hostConfirms,
 }: PublishActionOptions): PublishAction {
   const router = useRouter();
   const [pendingConfirmation, setPendingConfirmation] = useState<PendingConfirmation>(null);
@@ -98,6 +114,11 @@ export function usePublishAction({
       return;
     }
 
+    if (hostConfirms) {
+      setPendingConfirmation('publish');
+      return;
+    }
+
     const result = await methods.trigger();
 
     if (!result) {
@@ -131,7 +152,7 @@ export function usePublishAction({
     }
 
     setPendingConfirmation(selectedNonprofit ? 'nonprofit' : 'publish');
-  }, [readOnly, isNewPreprint, canPublishRegisteredReport, methods]);
+  }, [readOnly, isNewPreprint, canPublishRegisteredReport, methods, hostConfirms]);
 
   const uploadCoverImage = useCallback(
     async (formData: PublishingFormData): Promise<string | null | false> => {
@@ -210,7 +231,11 @@ export function usePublishAction({
       }
 
       try {
-        setDocumentTitle(editor, editedTitle);
+        // The host's confirmation holds its own Publish back until the work
+        // is complete; this is the same check, where it cannot be skipped.
+        if (hostConfirms && !(await methods.trigger())) return;
+
+        if (titleInDocument) setDocumentTitle(editor, editedTitle);
 
         // Drain the queue now: publishing supersedes the draft, and the API
         // rejects Details on a published note.
@@ -353,6 +378,8 @@ export function usePublishAction({
       note,
       isNewPreprint,
       canPublishChangelog,
+      hostConfirms,
+      titleInDocument,
       editor,
       saveDetailsNow,
       methods,
diff --git a/components/modals/ConfirmPublishModal.tsx b/components/modals/ConfirmPublishModal.tsx
index e7535c0b4..c2fb859d0 100644
--- a/components/modals/ConfirmPublishModal.tsx
+++ b/components/modals/ConfirmPublishModal.tsx
@@ -2,18 +2,14 @@ import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@
 import { Fragment, useState } from 'react';
 import { Button } from '@/components/ui/Button';
 import { Checkbox } from '@/components/ui/form/Checkbox';
-import {
-  FlaskConical,
-  GraduationCap,
-  HandCoins,
-  Scale,
-  Users,
-  FileText,
-  type LucideIcon,
-} from 'lucide-react';
+import { Ban, FlaskConical, HandCoins, Users, FileText, type LucideIcon } from 'lucide-react';
 import { Alert } from '@/components/ui/Alert';
+import { cn } from '@/utils/styles';
 
-type ConfirmPublishVariant = 'default' | 'rfp';
+export type ConfirmPublishVariant = 'default' | 'rfp';
+
+/** A work cannot be published under a shorter title. */
+export const MIN_PUBLISH_TITLE_LENGTH = 20;
 
 interface ConfirmPublishModalProps {
   isOpen: boolean;
@@ -38,15 +34,13 @@ interface GuidelineConfig {
   items: GuidelineItem[];
 }
 
-const GUIDELINES: Record<ConfirmPublishVariant, GuidelineConfig> = {
+/** What an author agrees to when publishing. */
+const PUBLISH_GUIDELINES: Record<ConfirmPublishVariant, GuidelineConfig> = {
   default: {
     heading: 'Guidelines for posts',
     items: [
-      { icon: GraduationCap, text: 'Stick to academically appropriate topics' },
-      {
-        icon: Scale,
-        text: 'Focus on presenting objective results and remain unbiased in your commentary',
-      },
+      { icon: FlaskConical, text: 'Stick to scientific topics' },
+      { icon: Ban, text: 'Don’t post illegal content or spam' },
       { icon: Users, text: 'Be respectful of differing opinions, viewpoints, and experiences' },
       { icon: FileText, text: 'Do not plagiarize any content, keep it original' },
     ],
@@ -64,6 +58,38 @@ const GUIDELINES: Record<ConfirmPublishVariant, GuidelineConfig> = {
   },
 };
 
+interface PublishGuidelinesProps {
+  variant: ConfirmPublishVariant;
+  className?: string;
+  /** The icons' colour; the notebook's indigo unless told otherwise. */
+  iconClassName?: string;
+}
+
+/** The guidelines an author agrees to, as a gray box: a heading and the list. */
+export function PublishGuidelines({
+  variant,
+  className,
+  iconClassName = 'text-indigo-600',
+}: PublishGuidelinesProps) {
+  const guidelines = PUBLISH_GUIDELINES[variant];
+  return (
+    <div className={cn('rounded-lg bg-gray-50 p-4', className)}>
+      <h4 className="mb-3 text-sm font-medium text-gray-900">{guidelines.heading}</h4>
+      <ul className="space-y-3">
+        {guidelines.items.map((item) => (
+          <li key={item.text} className="flex items-start gap-2">
+            <item.icon
+              className={cn('mt-0.5 h-[18px] w-[18px] flex-shrink-0', iconClassName)}
+              strokeWidth={2}
+            />
+            <span className="text-sm text-gray-600">{item.text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 export function ConfirmPublishModal({
   isOpen,
   onClose,
@@ -80,10 +106,9 @@ export function ConfirmPublishModal({
   const [title, setTitle] = useState(initialTitle);
   const [hasAgreed, setHasAgreed] = useState(false);
 
-  const isTitleValid = title.trim().length >= 20;
+  const isTitleValid = title.trim().length >= MIN_PUBLISH_TITLE_LENGTH;
   const isPublishEnabled = isTitleValid && hasAgreed;
 
-  const guidelines = GUIDELINES[variant];
   const resolvedDocumentLabel =
     documentLabel ?? (variant === 'rfp' ? 'request for proposal' : 'research proposal');
 
@@ -137,20 +162,7 @@ export function ConfirmPublishModal({
                     placeholder="Enter title..."
                   />
 
-                  <div className="bg-gray-50 p-4 rounded-lg mb-6">
-                    <h4 className="font-medium text-sm text-gray-900 mb-3">{guidelines.heading}</h4>
-                    <ul className="space-y-3">
-                      {guidelines.items.map((item) => (
-                        <li key={item.text} className="flex items-start gap-2">
-                          <item.icon
-                            className="h-[18px] w-[18px] mt-0.5 text-indigo-600 flex-shrink-0"
-                            strokeWidth={2}
-                          />
-                          <span className="text-sm text-gray-600">{item.text}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
+                  <PublishGuidelines variant={variant} className="mb-6" />
 
                   <div className="flex items-start gap-2 mb-6">
                     <Checkbox
diff --git a/components/ui/form/SearchableMultiSelect.tsx b/components/ui/form/SearchableMultiSelect.tsx
index 6d0e22fe8..6ad5df6c5 100644
--- a/components/ui/form/SearchableMultiSelect.tsx
+++ b/components/ui/form/SearchableMultiSelect.tsx
@@ -41,6 +41,14 @@ export interface SearchableMultiSelectProps {
     option: MultiSelectOption,
     context: { focus: boolean; selected: boolean }
   ) => React.ReactElement;
+  /** Seated inside the field, before the chosen options: an icon, say. */
+  leading?: React.ReactNode;
+  /** Shown in the search input once something is chosen; nothing by default. */
+  placeholderWhenFilled?: string;
+  /** Put the caret in the search input when the field mounts. */
+  autoFocus?: boolean;
+  /** Restyles the panel the results drop in. */
+  optionsClassName?: string;
 }
 
 export function SearchableMultiSelect({
@@ -59,6 +67,10 @@ export function SearchableMultiSelect({
   sortable = false,
   minSearchLength = 2,
   renderOption,
+  leading,
+  placeholderWhenFilled = '',
+  autoFocus = false,
+  optionsClassName,
 }: SearchableMultiSelectProps) {
   const id = useId();
   const [query, setQuery] = useState('');
@@ -206,6 +218,7 @@ export function SearchableMultiSelect({
               className
             )}
           >
+            {leading}
             {sortable ? (
               <SortableMultiSelectOptions
                 options={value}
@@ -242,8 +255,9 @@ export function SearchableMultiSelect({
                 id={id}
                 aria-label={sortable ? label || placeholder : undefined}
                 autoComplete="off"
+                autoFocus={autoFocus}
                 className="w-full bg-transparent border-none p-1 text-sm outline-none"
-                placeholder={value.length === 0 ? placeholder : ''}
+                placeholder={value.length === 0 ? placeholder : placeholderWhenFilled}
                 onChange={(e) => setQuery(e.target.value.trim())}
                 onKeyDown={handleKeyDown}
                 displayValue={() => query}
@@ -260,7 +274,8 @@ export function SearchableMultiSelect({
           <ComboboxOptions
             className={cn(
               'absolute z-10 mt-1 overflow-auto rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none max-h-60',
-              renderOption ? 'py-1' : 'p-2'
+              renderOption ? 'py-1' : 'p-2',
+              optionsClassName
             )}
             style={{ width: `${dropdownWidth}px` }}
           >
diff --git a/components/ui/form/SearchableUserSelect.tsx b/components/ui/form/SearchableUserSelect.tsx
index 81d20eb07..0cc113836 100644
--- a/components/ui/form/SearchableUserSelect.tsx
+++ b/components/ui/form/SearchableUserSelect.tsx
@@ -1,5 +1,9 @@
 import { useCallback } from 'react';
-import { SearchableMultiSelect, MultiSelectOption } from './SearchableMultiSelect';
+import {
+  SearchableMultiSelect,
+  MultiSelectOption,
+  type SearchableMultiSelectProps,
+} from './SearchableMultiSelect';
 import { SearchService } from '@/services/search.service';
 import { UserSuggestion } from '@/types/search';
 import { Avatar } from '@/components/ui/Avatar';
@@ -63,6 +67,14 @@ export interface SearchableUserSelectProps {
   debounceMs?: number;
   sortable?: boolean;
   getOptionValue?: (user: UserSuggestion) => string;
+  /** How a result row looks; the avatar, name, headline and profile link by default. */
+  renderOption?: SearchableMultiSelectProps['renderOption'];
+  /** Restyles the field itself. */
+  className?: string;
+  leading?: SearchableMultiSelectProps['leading'];
+  placeholderWhenFilled?: string;
+  autoFocus?: boolean;
+  optionsClassName?: string;
 }
 
 export function SearchableUserSelect({
@@ -74,6 +86,12 @@ export function SearchableUserSelect({
   debounceMs = 300,
   sortable = false,
   getOptionValue = defaultGetOptionValue,
+  renderOption = renderUserOption,
+  className,
+  leading,
+  placeholderWhenFilled,
+  autoFocus,
+  optionsClassName,
 }: Readonly<SearchableUserSelectProps>) {
   const handleAsyncSearch = useCallback(
     async (query: string) => {
@@ -106,7 +124,12 @@ export function SearchableUserSelect({
       helperText={helperText}
       debounceMs={debounceMs}
       sortable={sortable}
-      renderOption={renderUserOption}
+      renderOption={renderOption}
+      className={className}
+      leading={leading}
+      placeholderWhenFilled={placeholderWhenFilled}
+      autoFocus={autoFocus}
+      optionsClassName={optionsClassName}
     />
   );
 }
diff --git a/contexts/TopBarSlotContext.tsx b/contexts/TopBarSlotContext.tsx
index 7fb33d0de..340a81a61 100644
--- a/contexts/TopBarSlotContext.tsx
+++ b/contexts/TopBarSlotContext.tsx
@@ -6,6 +6,15 @@ interface TopBarSlotContextValue {
   /** Custom node rendered in the TopBar's top-left, replacing the breadcrumb. */
   leftSlot: ReactNode;
   setLeftSlot: (node: ReactNode) => void;
+  /**
+   * Shown in place of the page's own title, beside the back arrow, which
+   * stays: a page that names what is open rather than itself.
+   */
+  title: string | null;
+  setTitle: (title: string | null) => void;
+  /** A control seated between the back arrow and the title. */
+  leading: ReactNode;
+  setLeading: (node: ReactNode) => void;
 }
 
 const TopBarSlotContext = createContext<TopBarSlotContextValue | null>(null);
@@ -13,12 +22,18 @@ const TopBarSlotContext = createContext<TopBarSlotContextValue | null>(null);
 /**
  * Lets a page inject a custom element into the shared TopBar's left area (where
  * the breadcrumb normally renders). Used by the notebook to surface its
- * "Notebook" notes dropdown in the standard top bar. Pages that don't set a
- * slot fall back to the default breadcrumb.
+ * "Notebook" notes dropdown in the standard top bar, and by the workspace to
+ * put the open document's or conversation's title there. Pages that don't set
+ * anything fall back to the default breadcrumb.
  */
 export function TopBarSlotProvider({ children }: { children: ReactNode }) {
   const [leftSlot, setLeftSlot] = useState<ReactNode>(null);
-  const value = useMemo(() => ({ leftSlot, setLeftSlot }), [leftSlot]);
+  const [title, setTitle] = useState<string | null>(null);
+  const [leading, setLeading] = useState<ReactNode>(null);
+  const value = useMemo(
+    () => ({ leftSlot, setLeftSlot, title, setTitle, leading, setLeading }),
+    [leftSlot, title, leading]
+  );
   return <TopBarSlotContext.Provider value={value}>{children}</TopBarSlotContext.Provider>;
 }
 
diff --git a/hooks/useFittingCount.ts b/hooks/useFittingCount.ts
deleted file mode 100644
index bef3cd374..000000000
--- a/hooks/useFittingCount.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-
-export interface FitOptions {
-  /** How many items would like to show. */
-  readonly itemCount: number;
-  /** The narrowest an item may be laid out at. */
-  readonly minItemWidth: number;
-  /** Space between neighbouring items. */
-  readonly gap: number;
-  /**
-   * Width the row spends on things that are not these items — a trailing
-   * control, its gap — and that must stay visible before any item does.
-   */
-  readonly reservedWidth: number;
-}
-
-/** How many of the items fit side by side in `width` at their minimum size. */
-export function fitCount(
-  width: number,
-  { itemCount, minItemWidth, gap, reservedWidth }: FitOptions
-): number {
-  const available = width - reservedWidth;
-  if (available <= 0) return 0;
-  // n items take n widths and n - 1 gaps.
-  const fits = Math.floor((available + gap) / (minItemWidth + gap));
-  return Math.max(0, Math.min(itemCount, fits));
-}
-
-/**
- * How many of a row's items fit the row's current content width. The row
- * decides which items those are; this only counts. Measures on mount and
- * again whenever the element resizes, so a user dragging the pane narrower
- * sees items fold away as they stop fitting.
- */
-export function useFittingCount<T extends HTMLElement>(options: FitOptions) {
-  const [width, setWidth] = useState<number | null>(null);
-  const elementRef = useRef<T | null>(null);
-  const observerRef = useRef<ResizeObserver | null>(null);
-
-  const ref = useCallback((element: T | null) => {
-    observerRef.current?.disconnect();
-    observerRef.current = null;
-    elementRef.current = element;
-    if (!element) return;
-
-    observerRef.current = new ResizeObserver(([entry]) => {
-      setWidth(entry.contentRect.width);
-    });
-    observerRef.current.observe(element);
-  }, []);
-
-  // The observer reports after layout; measuring here as well means the
-  // first paint already shows the right number of items.
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    if (!element) return;
-    const style = getComputedStyle(element);
-    const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
-    setWidth(element.clientWidth - padding);
-  }, []);
-
-  const { itemCount, minItemWidth, gap, reservedWidth } = options;
-  const count = useMemo(
-    () => (width == null ? 0 : fitCount(width, { itemCount, minItemWidth, gap, reservedWidth })),
-    [width, itemCount, minItemWidth, gap, reservedWidth]
-  );
-
-  return { ref, count };
-}