From fcbb8437b2dac614a8df601112d9b99a47029f43 Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Mon, 21 Sep 2026 21:10:20 -0400
Subject: [PATCH] Replace the AI Mode document tabs with detail blocks and
 header publish controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The document pane's Document / Publish tabs become a strip of detail
blocks — Applying to, Funding goal, Authors, Cover image for a proposal;
Funding amount, Short description, Contacts, Cover image for an RFP —
each opening a popover with just its section of the form (or, for the
RFP picker, the existing modal). The strip shows as many blocks as the
pane is wide enough for, in a fixed order, and folds the rest into the
"All details" block, which opens the full form and says how many it
holds (hooks/useFittingCount). The workspace header gains the document's
title, a "N remaining" pill and a Publish button that stays disabled
until nothing required is missing; a published document shows a
Published pill and an Update button. The form now lives as long as the
note does, so switching views no longer rehydrates it from stale content.

Below the tablet breakpoint the drawer trades the strip for a
Document | Details switch, with the remaining count on Details and the
publish controls inline.

Supporting changes: completion.ts derives what is missing from the zod
schema without touching form errors; PublishStatusPill; PublishButton
gains requireComplete and reads Update for published works; the funding
section is split into FundingOpportunityField, FundingGoalField and a
FundingGoalSection with a shared useSelectedGrant; sections take a
className so they render bare in a popover; PublishingForm gains
showFooter; NotebookTabs loses its labels prop and the header its
"Esc to close" hint.

Verified with type-check, eslint and prettier only.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 components/AIMode/AIModeOverlay.tsx           |  38 ++-
 components/AIMode/DocumentPane.tsx            | 265 ++++++++++++------
 .../AIMode/document/PublishControls.tsx       |  22 ++
 .../document/details/AllDetailsBlock.tsx      |  64 +++++
 .../AIMode/document/details/DetailBlock.tsx   | 139 +++++++++
 .../document/details/DetailBlockStrip.tsx     |  96 +++++++
 .../details/SelectGrantForNoteModal.tsx       |  24 ++
 .../AIMode/document/details/detailBlocks.ts   | 138 +++++++++
 components/Notebook/NotebookTabs.tsx          |   6 +-
 .../Notebook/PublishingForm/PublishButton.tsx |  20 +-
 .../PublishingForm/PublishStatusPill.tsx      |  93 ++++++
 .../Notebook/PublishingForm/completion.ts     |  43 +++
 .../components/AuthorsSection.tsx             |   6 +-
 .../components/ContactsSection.tsx            |   6 +-
 .../components/FundingGoalField.tsx           |  40 +++
 .../components/FundingGoalSection.tsx         |  15 +
 .../components/FundingOpportunityField.tsx    |  93 ++++++
 .../components/FundingSection.tsx             | 139 +--------
 .../components/GrantDescriptionSection.tsx    |   6 +-
 .../components/GrantFundingAmountSection.tsx  |   6 +-
 .../PublishingForm/components/SectionProps.ts |   4 +
 .../components/WorkImageSection.tsx           |   6 +-
 components/Notebook/PublishingForm/index.tsx  |  24 +-
 .../PublishingForm/useSelectedGrant.ts        |  34 +++
 hooks/useFittingCount.ts                      |  69 +++++
 25 files changed, 1135 insertions(+), 261 deletions(-)
 create mode 100644 components/AIMode/document/PublishControls.tsx
 create mode 100644 components/AIMode/document/details/AllDetailsBlock.tsx
 create mode 100644 components/AIMode/document/details/DetailBlock.tsx
 create mode 100644 components/AIMode/document/details/DetailBlockStrip.tsx
 create mode 100644 components/AIMode/document/details/SelectGrantForNoteModal.tsx
 create mode 100644 components/AIMode/document/details/detailBlocks.ts
 create mode 100644 components/Notebook/PublishingForm/PublishStatusPill.tsx
 create mode 100644 components/Notebook/PublishingForm/completion.ts
 create mode 100644 components/Notebook/PublishingForm/components/FundingGoalField.tsx
 create mode 100644 components/Notebook/PublishingForm/components/FundingGoalSection.tsx
 create mode 100644 components/Notebook/PublishingForm/components/FundingOpportunityField.tsx
 create mode 100644 components/Notebook/PublishingForm/components/SectionProps.ts
 create mode 100644 components/Notebook/PublishingForm/useSelectedGrant.ts
 create mode 100644 hooks/useFittingCount.ts

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 };
+}