diff --git a/components/AIMode/AIModeOverlay.tsx b/components/AIMode/AIModeOverlay.tsx
index c72baac15..b49391ec0 100644
--- a/components/AIMode/AIModeOverlay.tsx
+++ b/components/AIMode/AIModeOverlay.tsx
@@ -12,9 +12,8 @@ import { useAIMode } from './AIModeContext';
 import { ChatPane } from './ChatPane';
 import { ConversationList } from './ConversationList';
 import { DocumentCard } from './DocumentCard';
-import { DocumentPane } from './DocumentPane';
+import { DocumentPane, type DocumentPaneView } from './DocumentPane';
 import { useAIModeChat } from './useAIModeChat';
-import type { NotebookTab } from '@/components/Notebook/NotebookTabs';
 import type { PublishingDefaultArticleType } from '@/contexts/PublishingHostContext';
 import { useAIModeDocument } from './useAIModeDocument';
 import { AI_MODE_NAME } from './copy';
@@ -92,8 +91,8 @@ export function AIModeOverlay() {
     anchor: 'left',
   });
   // Document or details in the right pane; details wants a wider floor.
-  const [documentTab, setDocumentTab] = useState<NotebookTab>('document');
-  const documentMinWidth = documentTab === 'details' ? DETAILS_MIN_WIDTH : DOCUMENT_MIN_WIDTH;
+  const [documentView, setDocumentView] = useState<DocumentPaneView>('document');
+  const documentMinWidth = documentView === 'details' ? DETAILS_MIN_WIDTH : DOCUMENT_MIN_WIDTH;
   // The document may grow until the chat is down to its minimum column.
   const documentMaxWidth = Math.max(
     documentMinWidth,
@@ -117,7 +116,7 @@ export function AIModeOverlay() {
   const [documentOpen, setDocumentOpen] = useState(false);
   useEffect(() => {
     setDocumentOpen(noteId != null && !isBelowTabletRef.current);
-    setDocumentTab('document');
+    setDocumentView('document');
   }, [noteId]);
 
   // What the conversation set out to write, from its opening message, so the
@@ -132,6 +131,11 @@ export function AIModeOverlay() {
   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 document column puts its publish controls up in the header, 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(() => {
@@ -151,7 +155,7 @@ export function AIModeOverlay() {
   const documentCard =
     noteId != null ? (
       <DocumentCard
-        title={doc.content?.title?.trim() || state.note?.title?.trim() || 'Document'}
+        title={documentTitle}
         status={doc.status}
         open={showDocument}
         onOpen={openDocument}
@@ -239,8 +243,16 @@ export function AIModeOverlay() {
           <Sparkles className="h-4 w-4 text-primary-600" aria-hidden="true" />
           <span className="text-sm font-semibold tracking-tight text-gray-900">{AI_MODE_NAME}</span>
         </div>
-        <div className="flex items-center gap-2">
-          <span className="hidden text-xs text-gray-400 tablet:!inline">Esc to close</span>
+        <div className="flex min-w-0 items-center gap-3">
+          {showDocument && !isBelowTablet && (
+            <>
+              <span className="hidden max-w-[260px] truncate text-xs text-gray-600 lg:!inline">
+                {documentTitle}
+              </span>
+              <div ref={setPublishControlsSlot} className="flex items-center" />
+              <span aria-hidden="true" className="h-5 w-px bg-gray-200" />
+            </>
+          )}
           <button
             type="button"
             onClick={close}
@@ -316,9 +328,10 @@ export function AIModeOverlay() {
             <DocumentPane
               document={doc}
               chat={state.chat.chat}
-              tab={documentTab}
-              onTabChange={setDocumentTab}
+              view={documentView}
+              onViewChange={setDocumentView}
               defaultArticleType={defaultArticleType}
+              publishControlsSlot={publishControlsSlot}
             />
           </aside>
         )}
@@ -347,9 +360,10 @@ export function AIModeOverlay() {
           <DocumentPane
             document={doc}
             chat={state.chat.chat}
-            tab={documentTab}
-            onTabChange={setDocumentTab}
+            view={documentView}
+            onViewChange={setDocumentView}
             defaultArticleType={defaultArticleType}
+            presentation="drawer"
             readOnly
             className="-mx-4 -mt-2"
           />
diff --git a/components/AIMode/DocumentPane.tsx b/components/AIMode/DocumentPane.tsx
index 91948771f..c99494bf3 100644
--- a/components/AIMode/DocumentPane.tsx
+++ b/components/AIMode/DocumentPane.tsx
@@ -1,12 +1,17 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import type { Editor } from '@tiptap/react';
 import { ExternalLink } from 'lucide-react';
 import { BlockEditorClientWrapper } from '@/components/Editor/components/BlockEditor/components/BlockEditorClientWrapper';
 import { NoteReviewBanner } from '@/components/Notebook/NoteReview/NoteReviewBanner';
-import { NotebookTabs, type NotebookTab } from '@/components/Notebook/NotebookTabs';
-import { PublishingForm, PublishingFormProvider } from '@/components/Notebook/PublishingForm';
+import {
+  PublishingForm,
+  PublishingFormProvider,
+  usePublishingCompletion,
+} from '@/components/Notebook/PublishingForm';
+import { ButtonGroup } from '@/components/ui/ButtonGroup';
 import {
   PublishingHostProvider,
   type PublishingDefaultArticleType,
@@ -23,8 +28,16 @@ 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 './document/details/DetailBlockStrip';
+import { PublishControls } from './document/PublishControls';
 import type { AIModeDocument } from './useAIModeDocument';
 
+/** The document itself, or the full publishing details form. */
+export type DocumentPaneView = 'document' | 'details';
+
+/** Room the "Open in notebook" button takes at the end of the block strip. */
+const NOTEBOOK_LINK_WIDTH = 30;
+
 /** The page column: shared by the skeleton and the document so they line up. */
 const DOCUMENT_PAGE_CLASS =
   'ai-mode-document mx-auto w-full max-w-[860px] px-5 py-6 tablet:!px-8 tablet:!py-8';
@@ -33,12 +46,22 @@ interface DocumentPaneProps {
   readonly document: AIModeDocument;
   /** The open chat, whose activity is one of the review's version signals. */
   readonly chat: AgentChat | null;
-  /** Document, or the publishing details form. */
-  readonly tab: NotebookTab;
-  readonly onTabChange: (tab: NotebookTab) => void;
+  readonly view: DocumentPaneView;
+  readonly onViewChange: (view: DocumentPaneView) => void;
   /** Work type to preselect in the details form for a note without one. */
   readonly defaultArticleType?: PublishingDefaultArticleType | null;
-  /** Never editable — the mobile drawer. */
+  /**
+   * 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.
+   */
+  readonly presentation?: 'pane' | 'drawer';
+  /**
+   * Where the pane places its publish controls when it is a column: an
+   * element in the workspace header. The drawer keeps them inline.
+   */
+  readonly publishControlsSlot?: HTMLElement | null;
+  /** The editor is never editable — the mobile drawer. */
   readonly readOnly?: boolean;
   readonly className?: string;
 }
@@ -55,9 +78,11 @@ interface DocumentPaneProps {
 export function DocumentPane({
   document,
   chat,
-  tab,
-  onTabChange,
+  view,
+  onViewChange,
   defaultArticleType = null,
+  presentation = 'pane',
+  publishControlsSlot = null,
   readOnly = false,
   className,
 }: DocumentPaneProps) {
@@ -149,104 +174,160 @@ export function DocumentPane({
   const startingDocument =
     status === 'working' && !document.hasWrittenVersion && review.review == null;
 
+  const openDetails = useCallback(() => onViewChange('details'), [onViewChange]);
+  const toggleDetails = useCallback(
+    () => onViewChange(view === 'details' ? 'document' : 'details'),
+    [onViewChange, view]
+  );
+
+  const notebookLink = document.notebookHref && (
+    <a
+      href={document.notebookHref}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Open in notebook"
+      title="Open in notebook"
+      style={{ width: NOTEBOOK_LINK_WIDTH }}
+      className="inline-flex h-[30px] shrink-0 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+    >
+      <ExternalLink className="h-[15px] w-[15px]" aria-hidden="true" />
+    </a>
+  );
+
   return (
-    <div className={cn('relative flex h-full min-h-0 flex-col bg-white', className)}>
-      <div className="flex h-12 shrink-0 items-center justify-between gap-2 border-b border-gray-200 px-3">
-        <NotebookTabs active={tab} onChange={onTabChange} labels={{ details: 'Publish' }} />
-        {document.notebookHref && (
-          <a
-            href={document.notebookHref}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
-          >
-            <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
-            Open in notebook
-          </a>
-        )}
-      </div>
+    <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>
+        <div className={cn('relative flex h-full min-h-0 flex-col bg-white', className)}>
+          {presentation === 'pane' ? (
+            <DetailBlockStrip
+              detailsOpen={view === 'details'}
+              onToggleDetails={toggleDetails}
+              trailing={notebookLink}
+              trailingWidth={document.notebookHref ? NOTEBOOK_LINK_WIDTH : 0}
+            />
+          ) : (
+            <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 tab — it holds the review
+          {/* 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', tab !== 'document' && 'hidden')}>
-        <NoteReviewBanner review={review} className="mx-6 mt-4" />
+          <div className={cn('min-h-0 flex-1 overflow-y-auto', view !== 'document' && 'hidden')}>
+            <NoteReviewBanner review={review} className="mx-6 mt-4" />
 
-        {error && content == null ? (
-          <div className="flex flex-col items-center gap-3 py-16 text-center">
-            <p className="text-sm text-gray-600">{error}</p>
-            <Button variant="outlined" size="sm" onClick={document.reload}>
-              Try again
-            </Button>
-          </div>
-        ) : loading || content == null ? (
-          <div className={DOCUMENT_PAGE_CLASS}>
-            <DocumentPaneSkeleton />
-          </div>
-        ) : startingDocument ? (
-          <StartingDocument label={phaseLabel} />
-        ) : (
-          <article className={cn(DOCUMENT_PAGE_CLASS, 'animate-in fade-in duration-300')}>
-            {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;
-                nothing has been changed.
+            {error && content == null ? (
+              <div className="flex flex-col items-center gap-3 py-16 text-center">
+                <p className="text-sm text-gray-600">{error}</p>
+                <Button variant="outlined" size="sm" onClick={document.reload}>
+                  Try again
+                </Button>
               </div>
-            )}
-            {status === 'empty' && review.review == null && <EmptyDocument />}
+            ) : loading || content == null ? (
+              <div className={DOCUMENT_PAGE_CLASS}>
+                <DocumentPaneSkeleton />
+              </div>
+            ) : startingDocument ? (
+              <StartingDocument label={phaseLabel} />
+            ) : (
+              <article className={cn(DOCUMENT_PAGE_CLASS, 'animate-in fade-in duration-300')}>
+                {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;
+                    nothing has been changed.
+                  </div>
+                )}
+                {status === 'empty' && review.review == null && <EmptyDocument />}
 
-            {/* Mounted once per note: the editor's content prop is only read on
+                {/* 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}>
-              <BlockEditorClientWrapper
-                key={noteId ?? 'none'}
-                content={content.content}
-                contentJson={content.contentJson}
-                editable={!readOnly}
-                locked={locked}
-                requireTitle={false}
-                autofocus={false}
-                onUpdate={readOnly ? undefined : handleEditorUpdate}
-                setEditor={setEditor}
-              />
-            </div>
+                <div className={writing && !document.hasWrittenVersion ? 'hidden' : undefined}>
+                  <BlockEditorClientWrapper
+                    key={noteId ?? 'none'}
+                    content={content.content}
+                    contentJson={content.contentJson}
+                    editable={!readOnly}
+                    locked={locked}
+                    requireTitle={false}
+                    autofocus={false}
+                    onUpdate={readOnly ? undefined : handleEditorUpdate}
+                    setEditor={setEditor}
+                  />
+                </div>
 
-            {status === 'drafting' && draftText && (
-              <DraftSection
-                text={draftText}
-                blocks={draftBlocks}
-                editor={editor}
-                key={document.draftKey}
-                hasSavedContent={document.hasWrittenVersion}
-              />
+                {status === 'drafting' && draftText && (
+                  <DraftSection
+                    text={draftText}
+                    blocks={draftBlocks}
+                    editor={editor}
+                    key={document.draftKey}
+                    hasSavedContent={document.hasWrittenVersion}
+                  />
+                )}
+
+                {status === 'working' && document.hasWrittenVersion && (
+                  <InProgressRow label={phaseLabel ?? 'Working'} />
+                )}
+              </article>
             )}
+          </div>
 
-            {status === 'working' && document.hasWrittenVersion && (
-              <InProgressRow label={phaseLabel ?? 'Working'} />
+          <div
+            className={cn(
+              'min-h-0 flex-1 overflow-y-auto px-6 py-6',
+              view !== 'details' && 'hidden'
             )}
-          </article>
-        )}
-      </div>
+          >
+            <PublishingForm showFooter={false} />
+          </div>
 
-      {tab === 'details' && (
-        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-6">
-          <PublishingHostProvider value={publishingHost}>
-            <PublishingFormProvider>
-              <PublishingForm />
-            </PublishingFormProvider>
-          </PublishingHostProvider>
+          {review.review && view === 'document' && (
+            <div className="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-4">
+              <NoteReviewControls
+                changeCount={review.review.changeCount}
+                onAccept={review.accept}
+                onReject={review.reject}
+              />
+            </div>
+          )}
         </div>
-      )}
+      </PublishingFormProvider>
+    </PublishingHostProvider>
+  );
+}
 
-      {review.review && tab === 'document' && (
-        <div className="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-4">
-          <NoteReviewControls
-            changeCount={review.review.changeCount}
-            onAccept={review.accept}
-            onReject={review.reject}
-          />
-        </div>
-      )}
+/**
+ * The drawer's top row: a Document | Details switch, with how many required
+ * details are left on the Details side, and the publish controls.
+ */
+function DrawerStrip({
+  view,
+  onViewChange,
+  onOpenDetails,
+}: {
+  readonly view: DocumentPaneView;
+  readonly onViewChange: (view: DocumentPaneView) => void;
+  readonly onOpenDetails: () => void;
+}) {
+  const { remaining } = usePublishingCompletion();
+  return (
+    <div className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-3 py-2">
+      <ButtonGroup
+        size="sm"
+        value={view}
+        onChange={(next) => onViewChange(next as DocumentPaneView)}
+        options={[
+          { value: 'document', label: 'Document' },
+          { value: 'details', label: 'Details', badge: remaining || undefined },
+        ]}
+      />
+      <PublishControls onOpenDetails={onOpenDetails} />
     </div>
   );
 }
diff --git a/components/AIMode/document/PublishControls.tsx b/components/AIMode/document/PublishControls.tsx
new file mode 100644
index 000000000..05a384c1d
--- /dev/null
+++ b/components/AIMode/document/PublishControls.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { PublishButton, PublishStatusPill } from '@/components/Notebook/PublishingForm';
+
+interface PublishControlsProps {
+  /** Opens the full details form, where the missing pieces are. */
+  readonly onOpenDetails: () => void;
+}
+
+/**
+ * The document's publishing state and its publish button, side by side.
+ * Renders inside the document's `PublishingFormProvider`; where it sits on
+ * screen is the host's choice.
+ */
+export function PublishControls({ onOpenDetails }: PublishControlsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <PublishStatusPill onOpenDetails={onOpenDetails} />
+      <PublishButton requireComplete size="sm" className="h-8 px-4 text-[13px]" />
+    </div>
+  );
+}
diff --git a/components/AIMode/document/details/AllDetailsBlock.tsx b/components/AIMode/document/details/AllDetailsBlock.tsx
new file mode 100644
index 000000000..1142c0057
--- /dev/null
+++ b/components/AIMode/document/details/AllDetailsBlock.tsx
@@ -0,0 +1,64 @@
+'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. */
+export const ALL_DETAILS_BLOCK_WIDTH = 116;
+
+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. */
+export function AllDetailsBlock({
+  done,
+  total,
+  hiddenCount,
+  active,
+  onClick,
+}: AllDetailsBlockProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      style={{ width: ALL_DETAILS_BLOCK_WIDTH }}
+      className={cn(
+        'flex h-[46px] shrink-0 flex-col justify-center gap-0.5 rounded-lg border px-2.5 text-left transition-colors',
+        active
+          ? 'border-primary-400 bg-primary-50 ring-[3px] ring-primary-100'
+          : 'border-gray-300 bg-gray-50 hover:bg-gray-100'
+      )}
+    >
+      <span className="flex items-center justify-between gap-1.5">
+        <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="rounded-full bg-gray-200 px-1.5 text-[10px] font-bold text-gray-700"
+          >
+            +{hiddenCount}
+          </span>
+        )}
+      </span>
+      <span className="truncate 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
new file mode 100644
index 000000000..247ee7302
--- /dev/null
+++ b/components/AIMode/document/details/DetailBlock.tsx
@@ -0,0 +1,139 @@
+'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 h-[46px] min-w-0 flex-1 flex-col justify-center gap-0.5 rounded-lg border bg-white px-2.5 text-left transition-colors',
+    open
+      ? 'border-primary-400 bg-primary-50 ring-[3px] ring-primary-100'
+      : filled
+        ? 'border-gray-200 hover:bg-gray-50'
+        : 'border-dashed 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">
+        <span
+          className={cn(
+            'flex items-center gap-1.5 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
new file mode 100644
index 000000000..d796d4379
--- /dev/null
+++ b/components/AIMode/document/details/DetailBlockStrip.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { useMemo, useState, type ReactNode } 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 = 8;
+
+interface DetailBlockStripProps {
+  /** The full details form is showing instead of the document. */
+  readonly detailsOpen: boolean;
+  readonly onToggleDetails: () => void;
+  /** Controls kept at the strip's end, after the blocks. */
+  readonly trailing?: ReactNode;
+  /** Width `trailing` takes, so the count of blocks that fit allows for it. */
+  readonly trailingWidth?: number;
+}
+
+/**
+ * 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,
+  trailing,
+  trailingWidth = 0,
+}: 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 + (trailingWidth > 0 ? trailingWidth + GAP : 0),
+  });
+
+  // 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 px-3"
+    >
+      {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}
+        />
+      )}
+      {trailing}
+    </div>
+  );
+}
diff --git a/components/AIMode/document/details/SelectGrantForNoteModal.tsx b/components/AIMode/document/details/SelectGrantForNoteModal.tsx
new file mode 100644
index 000000000..1795eafa9
--- /dev/null
+++ b/components/AIMode/document/details/SelectGrantForNoteModal.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+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. */
+export interface NoteModalProps {
+  readonly noteId: number;
+  readonly isOpen: boolean;
+  readonly onClose: () => void;
+}
+
+/** Picks the Request for Proposal a draft proposal answers and saves it to the note. */
+export function SelectGrantForNoteModal({ noteId, isOpen, onClose }: NoteModalProps) {
+  const { save } = useSelectedGrant(noteId);
+
+  return (
+    <SelectFundingOpportunityModal
+      isOpen={isOpen}
+      onClose={onClose}
+      onSelect={(grant) => void save(grant)}
+    />
+  );
+}
diff --git a/components/AIMode/document/details/detailBlocks.ts b/components/AIMode/document/details/detailBlocks.ts
new file mode 100644
index 000000000..bbe902508
--- /dev/null
+++ b/components/AIMode/document/details/detailBlocks.ts
@@ -0,0 +1,138 @@
+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/Notebook/NotebookTabs.tsx b/components/Notebook/NotebookTabs.tsx
index c1c8a6e06..225fe9816 100644
--- a/components/Notebook/NotebookTabs.tsx
+++ b/components/Notebook/NotebookTabs.tsx
@@ -8,8 +8,6 @@ export type NotebookTab = 'document' | 'details';
 interface NotebookTabsProps {
   active: NotebookTab;
   onChange: (tab: NotebookTab) => void;
-  /** Per-step label overrides — AI Mode calls the details step "Publish". */
-  labels?: Partial<Record<NotebookTab, string>>;
 }
 
 const STEPS: { id: NotebookTab; label: string; dataTour?: string }[] = [
@@ -20,7 +18,7 @@ const STEPS: { id: NotebookTab; label: string; dataTour?: string }[] = [
 /** Linear two-step flow shown in the notebook top bar. It reads as a sequence
  *  (Document → Details) rather than parallel tabs, so the progression toward
  *  publishing is visually explicit. */
-export function NotebookTabs({ active, onChange, labels }: NotebookTabsProps) {
+export function NotebookTabs({ active, onChange }: NotebookTabsProps) {
   const activeIndex = STEPS.findIndex((step) => step.id === active);
 
   return (
@@ -29,7 +27,7 @@ export function NotebookTabs({ active, onChange, labels }: NotebookTabsProps) {
         <div key={step.id} className="flex items-center gap-1.5">
           <Step
             index={index}
-            label={labels?.[step.id] ?? step.label}
+            label={step.label}
             state={
               index === activeIndex ? 'current' : index < activeIndex ? 'complete' : 'upcoming'
             }
diff --git a/components/Notebook/PublishingForm/PublishButton.tsx b/components/Notebook/PublishingForm/PublishButton.tsx
index 24cda156f..07fd14e84 100644
--- a/components/Notebook/PublishingForm/PublishButton.tsx
+++ b/components/Notebook/PublishingForm/PublishButton.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import type { ComponentProps } from 'react';
 import { Button } from '@/components/ui/Button';
 import { cn } from '@/utils/styles';
+import { usePublishingCompletion } from './completion';
 import { usePublishingController, type PublishingController } from './PublishingFormProvider';
 
 const publishLabel = ({
@@ -9,29 +11,41 @@ const publishLabel = ({
   isUpserting,
   isLinkingNonprofit,
   isRedirecting,
+  isPublished,
 }: PublishingController): string => {
   if (readOnly) return 'Published';
   if (isUpserting) return 'Publishing...';
   if (isLinkingNonprofit) return 'Linking nonprofit...';
   if (isRedirecting) return 'Redirecting...';
-  return 'Publish';
+  return isPublished ? 'Update' : 'Publish';
 };
 
 interface PublishButtonProps {
+  /**
+   * Stay disabled until every required detail is filled in. Without it the
+   * click validates and names what is missing, which suits a form the user
+   * is looking at; with it the button reads as the last step of a checklist.
+   */
+  readonly requireComplete?: boolean;
+  readonly size?: ComponentProps<typeof Button>['size'];
   readonly className?: string;
 }
 
 /** Starts the publish flow for the note the surrounding provider holds. */
-export function PublishButton({ className }: PublishButtonProps) {
+export function PublishButton({ requireComplete = false, size, className }: PublishButtonProps) {
   const controller = usePublishingController();
+  const { isComplete } = usePublishingCompletion();
+  const blockedByChecklist = requireComplete && !isComplete && !controller.isPublished;
 
   return (
     <Button
       data-testid="publishing-form-submit"
       variant="default"
+      size={size}
       onClick={controller.requestPublish}
+      title={blockedByChecklist ? 'Finish the remaining details to publish' : undefined}
       className={cn('disabled:opacity-50 disabled:cursor-not-allowed', className)}
-      disabled={!controller.canPublish}
+      disabled={!controller.canPublish || blockedByChecklist}
     >
       {publishLabel(controller)}
     </Button>
diff --git a/components/Notebook/PublishingForm/PublishStatusPill.tsx b/components/Notebook/PublishingForm/PublishStatusPill.tsx
new file mode 100644
index 000000000..bf638349c
--- /dev/null
+++ b/components/Notebook/PublishingForm/PublishStatusPill.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { Check, ExternalLink } from 'lucide-react';
+import { cn } from '@/utils/styles';
+import { getRequiredFields, usePublishingCompletion } from './completion';
+import { getWorkPath } from './formMapping';
+import { usePublishingController } from './PublishingFormProvider';
+
+/** Stroke length of the ring's circumference, so a share of it can be dashed. */
+const RING_CIRCUMFERENCE = 37.7;
+
+interface PublishStatusPillProps {
+  /** Opens the full details form, where the missing pieces are. */
+  readonly onOpenDetails: () => void;
+  readonly className?: string;
+}
+
+/**
+ * Where the note stands on the way to publishing: how many required details
+ * are still missing, that it is ready, or that it is already published (with
+ * a way to its page).
+ */
+export function PublishStatusPill({ onOpenDetails, className }: PublishStatusPillProps) {
+  const { note, articleType, workId, isPublished } = usePublishingController();
+  const { remaining } = usePublishingCompletion();
+
+  const base =
+    'inline-flex h-[30px] shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-semibold transition-colors';
+
+  if (isPublished && note?.post && articleType && workId) {
+    return (
+      <a
+        href={getWorkPath(articleType, workId, note.post.slug)}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn(
+          base,
+          'border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100',
+          className
+        )}
+      >
+        <span aria-hidden="true" className="h-1.5 w-1.5 rounded-full bg-emerald-600" />
+        Published
+        <ExternalLink className="h-3 w-3" aria-hidden="true" />
+      </a>
+    );
+  }
+
+  if (remaining === 0) {
+    return (
+      <span className={cn(base, 'border-emerald-300 bg-emerald-50 text-emerald-700', className)}>
+        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-emerald-600 text-white">
+          <Check className="h-2.5 w-2.5" strokeWidth={3.5} aria-hidden="true" />
+        </span>
+        Ready to publish
+      </span>
+    );
+  }
+
+  // The ring fills as the type's required details are completed.
+  const total = articleType
+    ? Math.max(getRequiredFields(articleType).length, remaining)
+    : remaining;
+  const done = total - remaining;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpenDetails}
+      title="See what is left to fill in"
+      className={cn(
+        base,
+        'border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100',
+        className
+      )}
+    >
+      <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" className="-rotate-90">
+        <circle cx="8" cy="8" r="6" fill="none" strokeWidth="2.5" className="stroke-amber-200" />
+        <circle
+          cx="8"
+          cy="8"
+          r="6"
+          fill="none"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeDasharray={`${(done / total) * RING_CIRCUMFERENCE} ${RING_CIRCUMFERENCE}`}
+          className="stroke-amber-700"
+        />
+      </svg>
+      {remaining} remaining
+    </button>
+  );
+}
diff --git a/components/Notebook/PublishingForm/completion.ts b/components/Notebook/PublishingForm/completion.ts
new file mode 100644
index 000000000..2e660f69f
--- /dev/null
+++ b/components/Notebook/PublishingForm/completion.ts
@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { useWatch } from 'react-hook-form';
+import { FORM_DEFAULTS } from './formMapping';
+import { publishingFormSchema, type ArticleType, type PublishingFormData } from './schema';
+
+export type PublishingFieldKey = keyof PublishingFormData;
+
+export interface PublishingCompletion {
+  /** The fields the schema still rejects, each once, in schema order. */
+  readonly missing: readonly PublishingFieldKey[];
+  readonly remaining: number;
+  readonly isComplete: boolean;
+}
+
+const COMPLETE: PublishingCompletion = { missing: [], remaining: 0, isComplete: true };
+
+/**
+ * What still stands between these values and publishing, straight from the
+ * schema: the same rules `trigger()` applies, read without touching the
+ * form's error state. Every schema issue names a single top-level field.
+ * Takes the form's values in any state of completeness, as `useWatch` hands
+ * them out.
+ */
+export function getPublishingCompletion(values: unknown): PublishingCompletion {
+  const result = publishingFormSchema.safeParse(values);
+  if (result.success) return COMPLETE;
+
+  const missing = Array.from(
+    new Set(result.error.issues.map((issue) => String(issue.path[0]) as PublishingFieldKey))
+  );
+  return { missing, remaining: missing.length, isComplete: false };
+}
+
+/** Every field the schema requires of this work type, read off an empty form. */
+export function getRequiredFields(articleType: ArticleType): readonly PublishingFieldKey[] {
+  return getPublishingCompletion({ ...FORM_DEFAULTS, articleType }).missing;
+}
+
+/** Live completion of the surrounding publishing form. */
+export function usePublishingCompletion(): PublishingCompletion {
+  const values = useWatch<PublishingFormData>();
+  return useMemo(() => getPublishingCompletion(values), [values]);
+}
diff --git a/components/Notebook/PublishingForm/components/AuthorsSection.tsx b/components/Notebook/PublishingForm/components/AuthorsSection.tsx
index 14f9323b4..bedf15a85 100644
--- a/components/Notebook/PublishingForm/components/AuthorsSection.tsx
+++ b/components/Notebook/PublishingForm/components/AuthorsSection.tsx
@@ -1,10 +1,12 @@
 import { Users } from 'lucide-react';
 import { SectionHeader } from './SectionHeader';
+import { cn } from '@/utils/styles';
+import type { SectionProps } from './SectionProps';
 import { useFormContext } from 'react-hook-form';
 import { getFieldErrorMessage } from '@/utils/form';
 import { SearchableUserSelect } from '@/components/ui/form/SearchableUserSelect';
 
-export function AuthorsSection() {
+export function AuthorsSection({ className }: SectionProps) {
   const {
     watch,
     setValue,
@@ -14,7 +16,7 @@ export function AuthorsSection() {
   const authors = watch('authors') || [];
 
   return (
-    <div className="py-3 px-6">
+    <div className={cn('py-3 px-6', className)}>
       <SectionHeader icon={Users}>Authors</SectionHeader>
       <SearchableUserSelect
         value={authors}
diff --git a/components/Notebook/PublishingForm/components/ContactsSection.tsx b/components/Notebook/PublishingForm/components/ContactsSection.tsx
index 51cf8eb93..f6ee4ccbc 100644
--- a/components/Notebook/PublishingForm/components/ContactsSection.tsx
+++ b/components/Notebook/PublishingForm/components/ContactsSection.tsx
@@ -1,5 +1,7 @@
 import { Users } from 'lucide-react';
 import { SectionHeader } from './SectionHeader';
+import { cn } from '@/utils/styles';
+import type { SectionProps } from './SectionProps';
 import { useFormContext } from 'react-hook-form';
 import { getFieldErrorMessage } from '@/utils/form';
 import { SearchableUserSelect } from '@/components/ui/form/SearchableUserSelect';
@@ -7,7 +9,7 @@ import { UserSuggestion } from '@/types/search';
 
 const getContactId = (user: UserSuggestion) => user.id!.toString();
 
-export function ContactsSection() {
+export function ContactsSection({ className }: SectionProps) {
   const {
     watch,
     setValue,
@@ -17,7 +19,7 @@ export function ContactsSection() {
   const contacts = watch('contacts') || [];
 
   return (
-    <div className="py-3 px-6">
+    <div className={cn('py-3 px-6', className)}>
       <SectionHeader icon={Users}>Contacts</SectionHeader>
       <SearchableUserSelect
         value={contacts}
diff --git a/components/Notebook/PublishingForm/components/FundingGoalField.tsx b/components/Notebook/PublishingForm/components/FundingGoalField.tsx
new file mode 100644
index 000000000..d89397aa0
--- /dev/null
+++ b/components/Notebook/PublishingForm/components/FundingGoalField.tsx
@@ -0,0 +1,40 @@
+import { useFormContext } from 'react-hook-form';
+import { Input } from '@/components/ui/form/Input';
+import type { PublishingFormData } from '../schema';
+
+/** The total a proposal asks funders for, in whole US dollars. */
+export function FundingGoalField() {
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = useFormContext<PublishingFormData>();
+
+  return (
+    <Input
+      data-testid="funding-goal-input"
+      {...register('budget')}
+      label="Funding Goal"
+      required
+      placeholder="1,000"
+      type="text"
+      inputMode="numeric"
+      className="w-full"
+      error={errors.budget?.message?.toString()}
+      rightElement={
+        <div className="flex items-center pr-4 font-medium text-sm text-gray-900">USD</div>
+      }
+      helperText="Set your total funding goal for this research project"
+      onChange={(e) => {
+        const numericValue = e.target.value.replaceAll(/\D/g, '');
+        setValue('budget', numericValue, { shouldValidate: true });
+
+        if (numericValue) {
+          e.target.value = new Intl.NumberFormat('en-US').format(Number.parseInt(numericValue));
+        } else {
+          e.target.value = '';
+        }
+      }}
+    />
+  );
+}
diff --git a/components/Notebook/PublishingForm/components/FundingGoalSection.tsx b/components/Notebook/PublishingForm/components/FundingGoalSection.tsx
new file mode 100644
index 000000000..b1c0146fe
--- /dev/null
+++ b/components/Notebook/PublishingForm/components/FundingGoalSection.tsx
@@ -0,0 +1,15 @@
+import { DollarSign } from 'lucide-react';
+import { cn } from '@/utils/styles';
+import { FundingGoalField } from './FundingGoalField';
+import { SectionHeader } from './SectionHeader';
+import type { SectionProps } from './SectionProps';
+
+/** The proposal's funding goal on its own, headed like the other sections. */
+export function FundingGoalSection({ className }: SectionProps) {
+  return (
+    <div className={cn('py-3 px-6', className)}>
+      <SectionHeader icon={DollarSign}>Funding Goal</SectionHeader>
+      <FundingGoalField />
+    </div>
+  );
+}
diff --git a/components/Notebook/PublishingForm/components/FundingOpportunityField.tsx b/components/Notebook/PublishingForm/components/FundingOpportunityField.tsx
new file mode 100644
index 000000000..c7844115e
--- /dev/null
+++ b/components/Notebook/PublishingForm/components/FundingOpportunityField.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import Image from 'next/image';
+import { Plus, X } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+import { SelectFundingOpportunityModal } from '@/components/modals/SelectFundingOpportunityModal';
+import { GRANT_IMAGE_FALLBACK_GRADIENT } from '@/types/grant';
+import { formatCompactAmount } from '@/utils/currency';
+import type { PublishingFormData } from '../schema';
+import { useSelectedGrant } from '../useSelectedGrant';
+
+interface FundingOpportunityFieldProps {
+  readonly noteId: number;
+}
+
+/**
+ * The Request for Proposal this proposal answers: the chosen one as a card,
+ * or a prompt to pick one. Renders nothing once the proposal is published,
+ * because the answer cannot change after that.
+ */
+export function FundingOpportunityField({ noteId }: FundingOpportunityFieldProps) {
+  const { watch } = useFormContext<PublishingFormData>();
+  const workId = watch('workId');
+  const { selectedGrant, isSaving, save } = useSelectedGrant(noteId);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  if (workId) return null;
+
+  return (
+    <>
+      <div>
+        <h3 className="text-[15px] font-semibold tracking-tight text-gray-900 mb-2">
+          Request for Proposal <span className="font-normal text-gray-500 text-xs">(Optional)</span>
+        </h3>
+        {selectedGrant ? (
+          <div className="flex gap-3 p-3 rounded-xl border border-gray-200 bg-gray-50 relative">
+            <div className="w-12 h-12 rounded-lg overflow-hidden bg-gray-900 flex-shrink-0 relative">
+              {selectedGrant.imageUrl ? (
+                <Image
+                  src={selectedGrant.imageUrl}
+                  alt={selectedGrant.shortTitle}
+                  fill
+                  className="object-cover"
+                  sizes="48px"
+                />
+              ) : (
+                <div
+                  className="absolute inset-0"
+                  style={{ background: GRANT_IMAGE_FALLBACK_GRADIENT }}
+                />
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+                {selectedGrant.organization || 'RFP'}
+              </div>
+              <div className="text-sm font-semibold text-gray-900 truncate">
+                {selectedGrant.shortTitle}
+              </div>
+              <div className="text-xs font-medium text-emerald-600">
+                {formatCompactAmount(selectedGrant.fundingAmount)} Funding
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={() => void save(null)}
+              disabled={isSaving}
+              aria-label="Remove RFP"
+              className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-200 transition-colors text-gray-400 hover:text-gray-600 disabled:pointer-events-none disabled:opacity-50"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setIsModalOpen(true)}
+            disabled={isSaving}
+            className="w-full flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg border border-dashed border-gray-300 text-xs text-gray-500 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50/50 transition-colors disabled:pointer-events-none disabled:opacity-50"
+          >
+            <Plus className="w-3.5 h-3.5" />
+            Select RFP
+          </button>
+        )}
+      </div>
+
+      <SelectFundingOpportunityModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSelect={(grant) => void save(grant)}
+      />
+    </>
+  );
+}
diff --git a/components/Notebook/PublishingForm/components/FundingSection.tsx b/components/Notebook/PublishingForm/components/FundingSection.tsx
index 0177d43f2..2e6a538d9 100644
--- a/components/Notebook/PublishingForm/components/FundingSection.tsx
+++ b/components/Notebook/PublishingForm/components/FundingSection.tsx
@@ -1,6 +1,5 @@
 import { useFormContext } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
-import { Upload, Image as ImageIcon, Gift, X, Plus } from 'lucide-react';
+import { Upload, Image as ImageIcon, Gift } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/form/Input';
 import { Switch } from '@/components/ui/Switch';
@@ -11,10 +10,8 @@ import type { Note } from '@/types/note';
 import { NonprofitSearchSection } from '@/components/Nonprofit';
 import { useNonprofitByFundraiseId } from '@/hooks/useNonprofitByFundraiseId';
 import { useNonprofitSearch } from '@/hooks/useNonprofitSearch';
-import { SelectFundingOpportunityModal } from '@/components/modals/SelectFundingOpportunityModal';
-import { formatCompactAmount } from '@/utils/currency';
-import { GRANT_IMAGE_FALLBACK_GRADIENT, type SelectedGrantDetails } from '@/types/grant';
-import { NoteService } from '@/services/note.service';
+import { FundingGoalField } from './FundingGoalField';
+import { FundingOpportunityField } from './FundingOpportunityField';
 
 interface FundingSectionProps {
   note: Note;
@@ -22,104 +19,8 @@ interface FundingSectionProps {
 
 const FEATURE_FLAG_NFT_REWARDS = false;
 
-function FundingOpportunitySection({ note }: Readonly<FundingSectionProps>) {
-  const { watch, setValue } = useFormContext();
-  const selectedGrant: SelectedGrantDetails | null = watch('selectedGrant');
-  const workId = watch('workId');
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isSavingGrant, setIsSavingGrant] = useState(false);
-
-  const saveSelectedGrant = async (grant: SelectedGrantDetails | null) => {
-    setIsSavingGrant(true);
-    try {
-      await NoteService.updateNote({
-        noteId: note.id,
-        selectedGrantId: grant?.id ?? null,
-      });
-      setValue('selectedGrant', grant);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : 'Failed to update RFP');
-    } finally {
-      setIsSavingGrant(false);
-    }
-  };
-
-  if (workId) return null;
-
-  return (
-    <>
-      <div>
-        <h3 className="text-[15px] font-semibold tracking-tight text-gray-900 mb-2">
-          Request for Proposal <span className="font-normal text-gray-500 text-xs">(Optional)</span>
-        </h3>
-        {selectedGrant ? (
-          <div className="flex gap-3 p-3 rounded-xl border border-gray-200 bg-gray-50 relative">
-            <div className="w-12 h-12 rounded-lg overflow-hidden bg-gray-900 flex-shrink-0 relative">
-              {selectedGrant.imageUrl ? (
-                <Image
-                  src={selectedGrant.imageUrl}
-                  alt={selectedGrant.shortTitle}
-                  fill
-                  className="object-cover"
-                  sizes="48px"
-                />
-              ) : (
-                <div
-                  className="absolute inset-0"
-                  style={{ background: GRANT_IMAGE_FALLBACK_GRADIENT }}
-                />
-              )}
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
-                {selectedGrant.organization || 'RFP'}
-              </div>
-              <div className="text-sm font-semibold text-gray-900 truncate">
-                {selectedGrant.shortTitle}
-              </div>
-              <div className="text-xs font-medium text-emerald-600">
-                {formatCompactAmount(selectedGrant.fundingAmount)} Funding
-              </div>
-            </div>
-            <button
-              type="button"
-              onClick={() => void saveSelectedGrant(null)}
-              disabled={isSavingGrant}
-              aria-label="Remove RFP"
-              className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-200 transition-colors text-gray-400 hover:text-gray-600 disabled:pointer-events-none disabled:opacity-50"
-            >
-              <X className="w-3.5 h-3.5" />
-            </button>
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setIsModalOpen(true)}
-            disabled={isSavingGrant}
-            className="w-full flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg border border-dashed border-gray-300 text-xs text-gray-500 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50/50 transition-colors disabled:pointer-events-none disabled:opacity-50"
-          >
-            <Plus className="w-3.5 h-3.5" />
-            Select RFP
-          </button>
-        )}
-      </div>
-
-      <SelectFundingOpportunityModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        onSelect={(grant) => void saveSelectedGrant(grant)}
-      />
-    </>
-  );
-}
-
 export function FundingSection({ note }: Readonly<FundingSectionProps>) {
-  const {
-    register,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useFormContext();
+  const { register, watch, setValue } = useFormContext();
   const rewardFunders = watch('rewardFunders');
   const budget = watch('budget');
   const nftSupply = watch('nftSupply');
@@ -198,7 +99,7 @@ export function FundingSection({ note }: Readonly<FundingSectionProps>) {
 
   return (
     <div className="py-3 px-6 space-y-6">
-      <FundingOpportunitySection note={note} />
+      <FundingOpportunityField noteId={note.id} />
 
       {fundraise ? (
         <>
@@ -220,35 +121,7 @@ export function FundingSection({ note }: Readonly<FundingSectionProps>) {
         </>
       ) : (
         <>
-          <div>
-            <Input
-              data-testid="funding-goal-input"
-              {...register('budget')}
-              label="Funding Goal"
-              required
-              placeholder="1,000"
-              type="text"
-              inputMode="numeric"
-              className="w-full"
-              error={errors.budget?.message?.toString()}
-              rightElement={
-                <div className="flex items-center pr-4 font-medium text-sm text-gray-900">USD</div>
-              }
-              helperText="Set your total funding goal for this research project"
-              onChange={(e) => {
-                const numericValue = e.target.value.replaceAll(/\D/g, '');
-                setValue('budget', numericValue, { shouldValidate: true });
-
-                if (numericValue) {
-                  e.target.value = new Intl.NumberFormat('en-US').format(
-                    Number.parseInt(numericValue)
-                  );
-                } else {
-                  e.target.value = '';
-                }
-              }}
-            />
-          </div>
+          <FundingGoalField />
 
           <div className="pt-4 border-t border-gray-200">
             <NonprofitSearchSection />
diff --git a/components/Notebook/PublishingForm/components/GrantDescriptionSection.tsx b/components/Notebook/PublishingForm/components/GrantDescriptionSection.tsx
index fed8fe58d..6f8a5ad21 100644
--- a/components/Notebook/PublishingForm/components/GrantDescriptionSection.tsx
+++ b/components/Notebook/PublishingForm/components/GrantDescriptionSection.tsx
@@ -2,15 +2,17 @@ import { useFormContext } from 'react-hook-form';
 import { FileText } from 'lucide-react';
 import { Textarea } from '@/components/ui/form/Textarea';
 import { SectionHeader } from './SectionHeader';
+import { cn } from '@/utils/styles';
+import type { SectionProps } from './SectionProps';
 
-export function GrantDescriptionSection() {
+export function GrantDescriptionSection({ className }: SectionProps) {
   const {
     register,
     formState: { errors },
   } = useFormContext();
 
   return (
-    <div className="py-3 px-6">
+    <div className={cn('py-3 px-6', className)}>
       <SectionHeader icon={FileText}>Short Description</SectionHeader>
       <div className="mt-2">
         <Textarea
diff --git a/components/Notebook/PublishingForm/components/GrantFundingAmountSection.tsx b/components/Notebook/PublishingForm/components/GrantFundingAmountSection.tsx
index d06764daf..16b379d6d 100644
--- a/components/Notebook/PublishingForm/components/GrantFundingAmountSection.tsx
+++ b/components/Notebook/PublishingForm/components/GrantFundingAmountSection.tsx
@@ -2,8 +2,10 @@ import { useFormContext } from 'react-hook-form';
 import { DollarSign } from 'lucide-react';
 import { Input } from '@/components/ui/form/Input';
 import { SectionHeader } from './SectionHeader';
+import { cn } from '@/utils/styles';
+import type { SectionProps } from './SectionProps';
 
-export function GrantFundingAmountSection() {
+export function GrantFundingAmountSection({ className }: SectionProps) {
   const {
     register,
     setValue,
@@ -11,7 +13,7 @@ export function GrantFundingAmountSection() {
   } = useFormContext();
 
   return (
-    <div className="py-3 px-6">
+    <div className={cn('py-3 px-6', className)}>
       <SectionHeader icon={DollarSign}>Funding Amount</SectionHeader>
       <div className="mt-2">
         <Input
diff --git a/components/Notebook/PublishingForm/components/SectionProps.ts b/components/Notebook/PublishingForm/components/SectionProps.ts
new file mode 100644
index 000000000..baac501b1
--- /dev/null
+++ b/components/Notebook/PublishingForm/components/SectionProps.ts
@@ -0,0 +1,4 @@
+export interface SectionProps {
+  /** Overrides the section's own gutter, e.g. `p-0` when it fills a popover. */
+  readonly className?: string;
+}
diff --git a/components/Notebook/PublishingForm/components/WorkImageSection.tsx b/components/Notebook/PublishingForm/components/WorkImageSection.tsx
index a6115afa9..be79f6499 100644
--- a/components/Notebook/PublishingForm/components/WorkImageSection.tsx
+++ b/components/Notebook/PublishingForm/components/WorkImageSection.tsx
@@ -3,6 +3,8 @@ 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';
 
@@ -12,7 +14,7 @@ const MAX_SIZE_MB = 10;
 const isValidFile = (file: unknown): file is File =>
   Boolean(file instanceof File && file.name && file.size > 0);
 
-export function WorkImageSection() {
+export function WorkImageSection({ className }: SectionProps) {
   const {
     control,
     getValues,
@@ -23,7 +25,7 @@ export function WorkImageSection() {
   const [, uploadAsset] = useAssetUpload();
 
   return (
-    <div className="py-3 px-6">
+    <div className={cn('py-3 px-6', className)}>
       <SectionHeader icon={ImageIcon}>Cover Image</SectionHeader>
       <Controller
         name="coverImage"
diff --git a/components/Notebook/PublishingForm/index.tsx b/components/Notebook/PublishingForm/index.tsx
index 56f592732..611ae9cec 100644
--- a/components/Notebook/PublishingForm/index.tsx
+++ b/components/Notebook/PublishingForm/index.tsx
@@ -27,6 +27,8 @@ import type { PublishingFormData } from './schema';
 
 export { PublishingFormProvider, usePublishingController } from './PublishingFormProvider';
 export { PublishButton } from './PublishButton';
+export { PublishStatusPill } from './PublishStatusPill';
+export { usePublishingCompletion } from './completion';
 
 const FEATURE_FLAG_RESEARCH_COIN = false;
 
@@ -35,6 +37,8 @@ const PUBLISHING_FORM_WORK_TYPES = getAvailableNotebookWorkTypes(false);
 interface PublishingFormProps {
   bountyAmount?: number | null;
   onBountyClick?: () => void;
+  /** Off when the host places the publish button somewhere else. */
+  showFooter?: boolean;
 }
 
 /**
@@ -42,7 +46,11 @@ interface PublishingFormProps {
  * type needs, with the publish button in a sticky footer. Renders inside a
  * `PublishingFormProvider`, which holds the values and the publish flow.
  */
-export function PublishingForm({ bountyAmount, onBountyClick }: Readonly<PublishingFormProps>) {
+export function PublishingForm({
+  bountyAmount,
+  onBountyClick,
+  showFooter = true,
+}: Readonly<PublishingFormProps>) {
   const {
     note,
     readOnly,
@@ -156,13 +164,15 @@ export function PublishingForm({ bountyAmount, onBountyClick }: Readonly<Publish
         </fieldset>
       </div>
 
-      <div className="border-t bg-white p-2 lg:p-6 sticky bottom-0">
-        <div className="mx-auto w-full max-w-2xl space-y-3">
-          {articleType === 'preregistration' && !workId && <PreregistrationPrivacyLockedAlert />}
-          {blockedMessage && <p className="text-sm text-red-600">{blockedMessage}</p>}
-          <PublishButton className="w-full" />
+      {showFooter && (
+        <div className="border-t bg-white p-2 lg:p-6 sticky bottom-0">
+          <div className="mx-auto w-full max-w-2xl space-y-3">
+            {articleType === 'preregistration' && !workId && <PreregistrationPrivacyLockedAlert />}
+            {blockedMessage && <p className="text-sm text-red-600">{blockedMessage}</p>}
+            <PublishButton className="w-full" />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/components/Notebook/PublishingForm/useSelectedGrant.ts b/components/Notebook/PublishingForm/useSelectedGrant.ts
new file mode 100644
index 000000000..f902d50d1
--- /dev/null
+++ b/components/Notebook/PublishingForm/useSelectedGrant.ts
@@ -0,0 +1,34 @@
+import { useCallback, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { NoteService } from '@/services/note.service';
+import type { SelectedGrantDetails } from '@/types/grant';
+import type { PublishingFormData } from './schema';
+
+/**
+ * The Request for Proposal a draft proposal answers. Unlike the other
+ * details it is stored on the note directly, so choosing one writes it
+ * before the form learns of it.
+ */
+export function useSelectedGrant(noteId: number) {
+  const { watch, setValue } = useFormContext<PublishingFormData>();
+  const selectedGrant = (watch('selectedGrant') ?? null) as SelectedGrantDetails | null;
+  const [isSaving, setIsSaving] = useState(false);
+
+  const save = useCallback(
+    async (grant: SelectedGrantDetails | null) => {
+      setIsSaving(true);
+      try {
+        await NoteService.updateNote({ noteId, selectedGrantId: grant?.id ?? null });
+        setValue('selectedGrant', grant);
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : 'Failed to update RFP');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [noteId, setValue]
+  );
+
+  return { selectedGrant, isSaving, save };
+}
diff --git a/hooks/useFittingCount.ts b/hooks/useFittingCount.ts
new file mode 100644
index 000000000..bef3cd374
--- /dev/null
+++ b/hooks/useFittingCount.ts
@@ -0,0 +1,69 @@
+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 };
+}