@kelpie/ui 0.11.0 → 0.13.0

package/src/pages/auth/SignUpPage.tsx

@@ -3,10 +3,12 @@ import { useState } from 'react'
 import type { FormEvent } from 'react'
 import { Link, useNavigate } from 'react-router'
 
+import { usePublicConfig } from '../../api/resources/publicConfig.ts'
 import { useSignUp } from '../../api/resources/session.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { SubmitButton, TextField } from './AuthForm.tsx'
 import { AuthLayout } from './AuthLayout.tsx'
+import { AuthMethods } from './AuthMethods.tsx'
 
 /**
  * Creating an account, against `POST /v1/auth/signup`.
@@ -24,11 +26,35 @@ import { AuthLayout } from './AuthLayout.tsx'
 export function SignUpPage(): React.JSX.Element {
   const navigate = useNavigate()
   const signUp = useSignUp()
+  const { config } = usePublicConfig()
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [localError, setLocalError] = useState<string | null>(null)
 
+  // Undefined (still loading) renders the form, same as the server's own
+  // default: a caller that has not thought about it sees no change.
+  if (config?.signupsEnabled === false) {
+    return (
+      <AuthLayout
+        title="Signups are closed"
+        footer={
+          <span className="text-ink-muted">
+            Already have an account?{' '}
+            <Link to="/login" className="font-medium text-accent hover:underline">
+              Sign in
+            </Link>
+          </span>
+        }
+      >
+        <p className="mt-5 text-ink-muted">
+          This instance is not accepting new accounts right now. If you were invited to a
+          workspace, use the link from your invitation email instead.
+        </p>
+      </AuthLayout>
+    )
+  }
+
   function submit(event: FormEvent): void {
     event.preventDefault()
 
@@ -94,6 +120,12 @@ export function SignUpPage(): React.JSX.Element {
         {signUp.error !== null && <ErrorPanel error={signUp.error} />}
         <SubmitButton label="Continue" pendingLabel="Creating…" isPending={signUp.isPending} />
       </form>
+      {/*
+        `/dashboard` rather than the verification screen a password signup goes
+        to: an account a module provisions is verified already, and having no
+        workspace, `SessionGate` sends it on to the workspace step itself.
+      */}
+      <AuthMethods intent="signup" next="/dashboard" />
     </AuthLayout>
   )
 }

package/src/pages/auth/nextPath.ts

@@ -0,0 +1,17 @@
+/**
+ * Where a signed-out page sends the browser once it is signed in.
+ *
+ * Its own file rather than beside the form controls: a module exporting a
+ * component and a function from one file loses Fast Refresh, and this is
+ * exported to modules, which is the reason it is not page-local. A module
+ * contributing a sign-in method is handed the result and has to be able to
+ * rely on what it means.
+ */
+
+/**
+ * Only a path within this app. An absolute URL in `?next=` would turn a
+ * sign-in page into an open redirect.
+ */
+export function safeNext(value: string | null): string {
+  return value !== null && value.startsWith('/') && !value.startsWith('//') ? value : '/dashboard'
+}

package/src/pages/auth/regionHref.ts

@@ -0,0 +1,10 @@
+/**
+ * The URL a region switcher navigates to: the other origin, plus the path,
+ * query, and hash the reader is already on.
+ */
+export function regionHref(
+  origin: string,
+  location: Pick<Location, 'pathname' | 'search' | 'hash'>,
+): string {
+  return `${origin}${location.pathname}${location.search}${location.hash}`
+}

package/src/pages/dashboard/DashboardPage.tsx

@@ -7,7 +7,7 @@ import { useWorkspace } from '../../api/resources/workspace.ts'
 import { AgentTasks } from '../../components/AgentTasks.tsx'
 import { PageHeader } from '../../components/PageHeader.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
-import { attentionRows, briefLines } from './attention.ts'
+import { attentionRows } from './attention.ts'
 import { ActivityFeed, AttentionList, DecisionsList, NotesList } from './sections.tsx'
 
 /**
@@ -19,37 +19,34 @@ import { ActivityFeed, AttentionList, DecisionsList, NotesList } from './section
  * for its name, and the team, to turn an author id into a person.
  */
 
-/** The heading date, written in the workspace's own day rather than the browser's. */
-function briefHeading(dashboard: Dashboard): string {
-  return new Intl.DateTimeFormat(undefined, {
-    weekday: 'long',
-    month: 'short',
-    day: 'numeric',
-    timeZone: dashboard.timezone,
-  }).format(dashboard.generatedAt)
-}
-
 export function DashboardPage(): React.JSX.Element {
   const { dashboard, isLoading, error } = useDashboard()
   const { workspace } = useWorkspace()
   const { nameById } = useMembers()
   const timezone = useTimezone()
+  const workspaceName = workspace?.name ?? 'This workspace'
 
   return (
     <div className="animate-fade-in">
-      <PageHeader title="Dashboard" description="What needs attention across this workspace." />
+      <PageHeader
+        title="Dashboard"
+        description="What needs attention across this workspace."
+        actions={
+          workspace?.id !== undefined ? (
+            <AgentTasks
+              targetType="workspace"
+              targetId={workspace.id}
+              targetLabel={workspaceName}
+            />
+          ) : undefined
+        }
+      />
 
       {error !== null && <ErrorPanel error={error} />}
       {isLoading && <LoadingPanel label="Loading the workspace…" />}
 
       {dashboard !== undefined && (
-        <DashboardBody
-          dashboard={dashboard}
-          workspaceId={workspace?.id}
-          workspaceName={workspace?.name ?? 'This workspace'}
-          nameById={nameById}
-          timezone={timezone}
-        />
+        <DashboardBody dashboard={dashboard} nameById={nameById} timezone={timezone} />
       )}
     </div>
   )
@@ -57,14 +54,10 @@ export function DashboardPage(): React.JSX.Element {
 
 function DashboardBody({
   dashboard,
-  workspaceId,
-  workspaceName,
   nameById,
   timezone,
 }: {
   readonly dashboard: Dashboard
-  readonly workspaceId: string | undefined
-  readonly workspaceName: string
   readonly nameById: ReadonlyMap<string, string>
   readonly timezone: string
 }): React.JSX.Element {
@@ -75,31 +68,6 @@ function DashboardBody({
 
   return (
     <div>
-      <section className="mb-8 border-b border-border pb-6">
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <p className="text-[11px] text-ink-faint">Daily brief</p>
-            <h2 className="mt-0.5 text-[15px] font-semibold tracking-tight text-ink">
-              {workspaceName} · {briefHeading(dashboard)}
-            </h2>
-            <p className="mt-1 text-[12px] text-ink-muted">
-              Assembled from overdue Plans, partnership touchpoints, and contacts going cold.
-            </p>
-          </div>
-          {workspaceId !== undefined && (
-            <AgentTasks targetType="workspace" targetId={workspaceId} targetLabel={workspaceName} />
-          )}
-        </div>
-        <ul className="mt-4 space-y-1.5">
-          {briefLines(dashboard).map((line) => (
-            <li key={line} className="flex gap-2 text-[13px] leading-relaxed text-ink">
-              <span className="mt-[9px] h-1 w-1 shrink-0 rounded-full bg-accent" />
-              <span>{line}</span>
-            </li>
-          ))}
-        </ul>
-      </section>
-
       <div className="mb-8 grid gap-8 lg:grid-cols-2">
         <AttentionList rows={attentionRows(dashboard)} />
         <ActivityFeed

package/src/pages/dashboard/attention.ts

@@ -3,16 +3,16 @@ import type {
   DashboardPlanItem,
   DashboardStaleContact,
   DashboardTouchpoint,
-  PipelineKind,
+  DashboardUpcomingEvent,
   RecordTargetType,
 } from '@kelpie/schemas'
 
 import type { ChipTone } from '../../components/Chip.tsx'
-import { formatDay } from '../../lib/dates.ts'
+import { formatDate, formatDay } from '../../lib/dates.ts'
 
 /**
- * Reading the workspace snapshot as a page: one attention list, and the brief
- * above it.
+ * Reading the workspace snapshot as a page: one attention list from the
+ * signals the service already ranked.
  *
  * Pure functions over the decoded response, so the page renders and these are
  * tested separately. Nothing here recomputes a signal: the service already
@@ -30,6 +30,8 @@ const ROUTES: Readonly<Record<RecordTargetType, string | undefined>> = {
   raise: '/fundraising',
   enquiry: '/enquiries',
   candidate: undefined,
+  event: '/events',
+  attendance: undefined,
 }
 
 const TARGET_TYPE_LABELS: Readonly<Record<RecordTargetType, string>> = {
@@ -41,6 +43,8 @@ const TARGET_TYPE_LABELS: Readonly<Record<RecordTargetType, string>> = {
   raise: 'Fundraising',
   enquiry: 'Enquiry',
   candidate: 'Candidate',
+  event: 'Event',
+  attendance: 'Attendance',
 }
 
 export function targetTypeLabel(targetType: RecordTargetType): string {
@@ -115,8 +119,22 @@ function staleContactRow(contact: DashboardStaleContact): AttentionRow {
   }
 }
 
+function upcomingEventRow(event: DashboardUpcomingEvent, timezone: string): AttentionRow {
+  const where = event.location.length > 0 ? event.location : event.format
+
+  return {
+    id: `event-${event.id}`,
+    label: 'Upcoming event',
+    tone: 'accent',
+    meta: formatDate(event.startsAt, timezone),
+    title: event.name,
+    detail: `${String(event.attendeeCount)} registered · ${where}`,
+    href: `/events/${event.id}`,
+  }
+}
+
 /**
- * The signals behind the brief, most urgent first.
+ * The attention list, most urgent first.
  *
  * The groups are concatenated rather than sorted: each arrives from the API in
  * its own order — plan items soonest first, contacts coldest first — and a
@@ -131,79 +149,7 @@ export function attentionRows(dashboard: Dashboard): readonly AttentionRow[] {
     ...touchpoints.filter((touchpoint) => touchpoint.overdue).map(touchpointRow),
     ...dashboard.dueSoonPlanItems.items.map((item) => planItemRow(item, false)),
     ...touchpoints.filter((touchpoint) => !touchpoint.overdue).map(touchpointRow),
+    ...dashboard.upcomingEvents.items.map((item) => upcomingEventRow(item, dashboard.timezone)),
     ...dashboard.staleContacts.items.map(staleContactRow),
   ]
 }
-
-function plural(count: number, singular: string, pluralForm = `${singular}s`): string {
-  return `${String(count)} ${count === 1 ? singular : pluralForm}`
-}
-
-/**
- * How a count of open records reads mid-sentence.
- *
- * Not `PIPELINE_KIND_LABELS`: that one is nav wording, where a Raise is filed
- * under "Fundraising", and "3 fundraisings" is not a sentence. Written out
- * rather than suffixed, because "opportunitys" is not one either.
- */
-const OPEN_PIPELINE_NOUNS: Readonly<
-  Record<PipelineKind, { readonly one: string; readonly many: string }>
-> = {
-  enquiry: { one: 'enquiry', many: 'enquiries' },
-  deal: { one: 'deal', many: 'deals' },
-  opportunity: { one: 'opportunity', many: 'opportunities' },
-  raise: { one: 'raise', many: 'raises' },
-  partnership: { one: 'partnership', many: 'partnerships' },
-}
-
-/**
- * The brief, built from the totals rather than from the rows.
- *
- * A list is capped by the request's limit and a total is not, so counting the
- * rows on screen would understate every workspace with more than a page of them.
- */
-export function briefLines(dashboard: Dashboard): readonly string[] {
-  const lines: string[] = []
-
-  if (dashboard.overduePlanItems.total > 0) {
-    lines.push(
-      `${plural(dashboard.overduePlanItems.total, 'plan item')} overdue — triage Planning first.`,
-    )
-  }
-
-  if (dashboard.dueSoonPlanItems.total > 0) {
-    lines.push(
-      `${plural(dashboard.dueSoonPlanItems.total, 'plan item')} due in the next ${plural(dashboard.upcomingDays, 'day')}.`,
-    )
-  }
-
-  if (dashboard.partnershipTouchpoints.total > 0) {
-    lines.push(
-      `${plural(dashboard.partnershipTouchpoints.total, 'partnership touchpoint')} at hand.`,
-    )
-  }
-
-  if (dashboard.staleContacts.total > 0) {
-    lines.push(
-      `${plural(dashboard.staleContacts.total, 'contact')} past the ${String(dashboard.staleContactDays)}-day touch threshold.`,
-    )
-  }
-
-  const open = dashboard.pipelines.filter((pipeline) => pipeline.open > 0)
-
-  if (open.length > 0) {
-    lines.push(
-      `Open: ${open
-        .map((pipeline) => {
-          const noun = OPEN_PIPELINE_NOUNS[pipeline.kind]
-
-          return plural(pipeline.open, noun.one, noun.many)
-        })
-        .join(', ')}.`,
-    )
-  }
-
-  return lines.length === 0
-    ? ['Nothing urgent. Pipeline and relationships look quiet today.']
-    : lines
-}

package/src/pages/dashboard/sections.tsx

@@ -9,6 +9,7 @@ import type { ReactNode } from 'react'
 import { Link } from 'react-router'
 
 import { Chip } from '../../components/Chip.tsx'
+import { MarkdownView } from '../../components/MarkdownView.tsx'
 import { SectionHeader } from '../../components/SectionHeader.tsx'
 import { formatDate, formatRelativeTime } from '../../lib/dates.ts'
 import { targetHref, targetTypeLabel } from './attention.ts'
@@ -72,7 +73,10 @@ function EmptyOr({
 export function AttentionList({ rows }: { readonly rows: readonly AttentionRow[] }): React.JSX.Element {
   return (
     <section>
-      <SectionHeader title="Needs attention" description="The signals behind the brief." />
+      <SectionHeader
+        title="Needs attention"
+        description="Overdue Plans, partnership touchpoints, and contacts going cold."
+      />
       <EmptyOr isEmpty={rows.length === 0} empty="Nothing urgent right now.">
         <ul className="divide-y divide-border border-y border-border">
           {rows.map((row) => (
@@ -201,7 +205,9 @@ export function NotesList({
           {notes.map((note) => (
             <li key={note.id} className="py-3">
               <div className="flex items-start justify-between gap-2">
-                <p className="line-clamp-3 text-[13px] leading-relaxed text-ink">{note.body}</p>
+                <div className="line-clamp-3 min-w-0 flex-1">
+                  <MarkdownView source={note.body} />
+                </div>
                 {note.pinned && (
                   <span className="shrink-0 text-[10px] font-medium tracking-wide text-accent uppercase">
                     Pinned

package/src/pages/forms/FormActions.tsx

@@ -1,9 +1,10 @@
-import { PIPELINE_KINDS } from '@kelpie/schemas'
-import type { Form, FormAttachTarget, PipelineKind } from '@kelpie/schemas'
+import { FORM_ATTACH_TARGET_TYPES, PLAN_ITEM_TARGET_TYPE_LABELS } from '@kelpie/schemas'
+import type { Form, FormAttachTarget, FormAttachTargetType, PipelineKind } from '@kelpie/schemas'
 import { useMemo, useState } from 'react'
 
 import { useDeals } from '../../api/resources/deals.ts'
 import { useEnquiries } from '../../api/resources/enquiries.ts'
+import { useEvents } from '../../api/resources/events.ts'
 import { useUpdateForm } from '../../api/resources/forms.ts'
 import { useLists } from '../../api/resources/lists.ts'
 import { useMembers } from '../../api/resources/members.ts'
@@ -400,12 +401,13 @@ interface AttachRecord {
   readonly name: string
 }
 
-function useAttachOptions(kind: PipelineKind): readonly AttachRecord[] {
+function useAttachOptions(kind: FormAttachTargetType): readonly AttachRecord[] {
   const deals = useDeals({}, { enabled: kind === 'deal' })
   const opportunities = useOpportunities({}, { enabled: kind === 'opportunity' })
   const raises = useRaises({}, { enabled: kind === 'raise' })
   const partnerships = usePartnerships({}, { enabled: kind === 'partnership' })
   const enquiries = useEnquiries({}, { enabled: kind === 'enquiry' })
+  const events = useEvents({}, { enabled: kind === 'event' })
 
   switch (kind) {
     case 'deal':
@@ -421,6 +423,8 @@ function useAttachOptions(kind: PipelineKind): readonly AttachRecord[] {
       }))
     case 'enquiry':
       return enquiries.records.map((enquiry) => ({ id: enquiry.id, name: enquiry.name }))
+    case 'event':
+      return events.records.map((record) => ({ id: record.id, name: record.name }))
   }
 }
 
@@ -431,7 +435,7 @@ function AttachTargetsBlock({
   readonly form: Form
   readonly onChange: (next: readonly FormAttachTarget[]) => void
 }): React.JSX.Element {
-  const [kind, setKind] = useState<PipelineKind>('deal')
+  const [kind, setKind] = useState<FormAttachTargetType>('deal')
   const [pick, setPick] = useState('')
   const options = useAttachOptions(kind)
   const chosen = form.attachTargets
@@ -459,7 +463,9 @@ function AttachTargetsBlock({
     <div className="space-y-2 rounded-md border border-border p-4">
       <div className="text-[13px] font-medium text-ink">Attach the submitter to a record</div>
       <p className="text-[11px] text-ink-faint">
-        Every submitter is linked into these records through <code>person_links</code>.
+        Pipeline records receive a <code>person_links</code> row. An Event
+        registers Attendance instead: the submitter is marked registered, and a
+        second submit of the same person is a no-op.
       </p>
       <ul className="divide-y divide-border">
         {chosen.length === 0 && (
@@ -496,13 +502,13 @@ function AttachTargetsBlock({
           className={inputClass}
           value={kind}
           onChange={(event) => {
-            setKind(event.target.value as PipelineKind)
+            setKind(event.target.value as FormAttachTargetType)
             setPick('')
           }}
         >
-          {PIPELINE_KINDS.map((option) => (
+          {FORM_ATTACH_TARGET_TYPES.map((option) => (
             <option key={option} value={option}>
-              {option}
+              {PLAN_ITEM_TARGET_TYPE_LABELS[option]}
             </option>
           ))}
         </select>

package/src/pages/onboarding/HandbookStepPage.tsx

@@ -1,45 +1,47 @@
-import { useNavigate } from 'react-router'
+import { Navigate, useNavigate, useSearchParams } from 'react-router'
 
 import { useHandbookPages } from '../../api/resources/handbookPages.ts'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
-import { PrimaryButton } from '../auth/AuthForm.tsx'
 import { AuthLayout } from '../auth/AuthLayout.tsx'
+import { OnboardingNav } from './OnboardingNav.tsx'
+import { isOnboardingRerun } from './onboardingRerun.ts'
 
 /**
- * Onboarding step 3: the starter handbook.
+ * Onboarding step 5: review the starter handbook.
  *
- * The mockup's button created these pages. Against the real API they already
- * exist: `POST /v1/workspaces` seeded them in the same transaction that created
- * the workspace, two steps ago. So this reads them back and shows what is there.
+ * Pages were seeded on step 2 when the reader picked an organisation type.
+ * This step reads them back and shows what agents will learn from.
  *
- * That is the deviation, and it is the honest one. A button labelled "create"
- * that creates nothing teaches a reader something false about the product, and
- * the alternative — deleting the step — would drop the one screen that tells a
- * new workspace its handbook is what agents read.
+ * A rerun skips this step: the pages are already in place.
  */
 export function HandbookStepPage(): React.JSX.Element {
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
   const { records: pages, isLoading, error } = useHandbookPages()
 
+  if (isOnboardingRerun(searchParams)) {
+    return <Navigate to="/dashboard" replace />
+  }
+
   function finish(): void {
-    // The wizard ends on the dashboard, per `onboarding.md`. It is empty for a
-    // brand new workspace, which is the point: it says what there is to fill in.
     navigate('/dashboard', { replace: true })
   }
 
+  const sortedPages = [...pages].sort((left, right) => left.sortOrder - right.sortOrder)
+
   return (
     <AuthLayout
-      step={3}
+      step={5}
       title="Your starter handbook"
-      description="These markdown pages are ready. Agents read them to learn what your company is."
+      description="These markdown pages were chosen for your organisation type. Agents read them to learn what your company is."
     >
       <div className="mt-5 space-y-4">
         {error !== null && <ErrorPanel error={error} />}
         {error === null && isLoading && <LoadingPanel label="Loading your handbook…" />}
 
-        {error === null && !isLoading && pages.length > 0 && (
+        {error === null && !isLoading && sortedPages.length > 0 && (
           <ul className="max-h-56 overflow-y-auto rounded-md border border-border bg-surface">
-            {pages.map((page) => (
+            {sortedPages.map((page) => (
               <li
                 key={page.id}
                 className="border-b border-border px-3 py-2 text-[13px] text-ink last:border-0"
@@ -50,25 +52,20 @@ export function HandbookStepPage(): React.JSX.Element {
           </ul>
         )}
 
-        {/* An empty box under a heading that says the pages are ready would
-            assert one thing and show another. The handbook is seeded with the
-            workspace, so nothing here is the seeding having not happened. */}
-        {error === null && !isLoading && pages.length === 0 && (
+        {error === null && !isLoading && sortedPages.length === 0 && (
           <p className="rounded-md border border-border bg-surface px-3 py-2 text-[13px] text-ink-muted">
             This workspace has no handbook pages. That is not what a new workspace should look
             like — the Handbook tab is where to add them.
           </p>
         )}
 
-        {pages.length > 0 && (
+        {sortedPages.length > 0 && (
           <p className="text-[12px] text-ink-muted">
             Every page starts as a stub. Write them from the Handbook tab whenever you are ready.
           </p>
         )}
 
-        {/* Not a submit: the work behind this step already happened, so the
-            button only moves the reader on. */}
-        <PrimaryButton label="Go to Kelpie" onClick={finish} />
+        <OnboardingNav step={5} nextLabel="Go to Kelpie" nextType="button" onNext={finish} />
       </div>
     </AuthLayout>
   )

package/src/pages/onboarding/InvitesStepPage.tsx

@@ -2,14 +2,16 @@ import { INVITABLE_ROLES } from '@kelpie/schemas'
 import type { InvitableRole } from '@kelpie/schemas'
 import { useState } from 'react'
 import type { FormEvent } from 'react'
-import { useNavigate } from 'react-router'
+import { useNavigate, useSearchParams } from 'react-router'
 
 import { useSendInvite } from '../../api/resources/invites.ts'
-import { AUTH_INPUT_CLASS, SecondaryButton, SubmitButton } from '../auth/AuthForm.tsx'
+import { AUTH_INPUT_CLASS, SecondaryButton } from '../auth/AuthForm.tsx'
 import { AuthLayout } from '../auth/AuthLayout.tsx'
+import { OnboardingNav } from './OnboardingNav.tsx'
+import { isOnboardingRerun } from './onboardingRerun.ts'
 
 /**
- * Onboarding step 2: invitations, against `POST /v1/workspaces/:id/invites`.
+ * Onboarding step 4: invitations, against `POST /v1/workspaces/:id/invites`.
  *
  * One request per address, and they can fail one at a time — an address already
  * invited answers `409` while its neighbours succeed. The mockup could ignore
@@ -38,9 +40,16 @@ function isOutstanding(row: InviteRow): boolean {
 
 export function InvitesStepPage(): React.JSX.Element {
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const rerun = isOnboardingRerun(searchParams)
   const sendInvite = useSendInvite()
   const [rows, setRows] = useState<readonly InviteRow[]>([emptyRow()])
 
+  /** First run reviews the handbook next; a rerun leaves those pages alone. */
+  function afterInvites(): void {
+    navigate(rerun ? '/dashboard' : '/onboarding/handbook', { replace: true })
+  }
+
   function changeRow(index: number, changes: Partial<InviteRow>): void {
     setRows((previous) =>
       previous.map((row, at) => (at === index ? { ...row, ...changes } : row)),
@@ -80,7 +89,7 @@ export function InvitesStepPage(): React.JSX.Element {
     sendOutstanding()
       .then((allSent) => {
         if (allSent) {
-          navigate('/onboarding/handbook', { replace: true })
+          afterInvites()
         }
       })
       .catch(() => undefined)
@@ -90,7 +99,7 @@ export function InvitesStepPage(): React.JSX.Element {
 
   return (
     <AuthLayout
-      step={2}
+      step={4}
       title="Invite teammates"
       description="Optional. You can always invite people later from Admin → Team."
     >
@@ -117,20 +126,19 @@ export function InvitesStepPage(): React.JSX.Element {
           Add another
         </button>
 
-        <div className="flex flex-col gap-2 pt-1">
-          <SubmitButton
-            label={outstanding === 0 ? 'Continue' : 'Send invitations'}
-            pendingLabel="Sending…"
-            isPending={sendInvite.isPending}
-          />
-          <SecondaryButton
-            label="Skip for now"
-            disabled={sendInvite.isPending}
-            onClick={() => {
-              navigate('/onboarding/handbook', { replace: true })
-            }}
-          />
-        </div>
+        <OnboardingNav
+          step={4}
+          nextLabel={outstanding === 0 ? 'Next' : 'Send invitations'}
+          nextPendingLabel="Sending…"
+          isPending={sendInvite.isPending}
+          extra={
+            <SecondaryButton
+              label="Skip for now"
+              disabled={sendInvite.isPending}
+              onClick={afterInvites}
+            />
+          }
+        />
       </form>
     </AuthLayout>
   )