@kelpie/ui 0.3.1 → 0.4.1

package/src/pages/HiringPage.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import type { FormEvent } from 'react'
 import { useNavigate } from 'react-router'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useCreateRole, useRoles } from '../api/resources/roles.ts'
 import { Chip } from '../components/Chip.tsx'
 import { DataTable } from '../components/DataTable.tsx'
@@ -27,6 +28,7 @@ export function HiringPage(): React.JSX.Element {
   const roles = useRoles({ term: term.trim().length > 0 ? term.trim() : undefined })
   const counts = useRoleCandidateCounts(roles.records.map((role) => role.id))
   const createRole = useCreateRole()
+  const timezone = useTimezone()
 
   function reset(): void {
     setAdding(false)
@@ -76,7 +78,7 @@ export function HiringPage(): React.JSX.Element {
     {
       key: 'created',
       header: 'Created',
-      render: (role) => formatDate(role.createdAt),
+      render: (role) => formatDate(role.createdAt, timezone),
     },
   ]
 

package/src/pages/PlanningPage.tsx

@@ -33,7 +33,7 @@ const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const
 /** How many of a day's items a calendar cell shows before summarising the rest. */
 const CELL_ITEM_LIMIT = 3
 
-const MONTH_AND_YEAR = new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' })
+const MONTH_AND_YEAR = new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' })
 
 export function PlanningPage(): React.JSX.Element {
   const [view, setView] = useState<ViewMode>('list')

package/src/pages/account/AccountLayout.tsx

@@ -1,17 +1,27 @@
 import { NavLink, Outlet } from 'react-router'
 
+import type { NavItem } from '../../registry/contributions.ts'
+import { useNavItems } from '../../registry/context.ts'
+import { useVisibleNavItems } from '../../registry/visibleNav.ts'
+
 /**
  * Tabs across the account's own settings, from the mockup's `AccountNav`.
  *
- * Three of its five tabs are here. Personal API keys and integrations arrive
- * with the features behind them, the same rule the shell's sidebar follows.
+ * Three of its five tabs are core's. The rest come from `nav.account`, which is
+ * where a module's own account page announces itself: a module route mounts as
+ * a sibling of `/account` rather than a child of it, so without this the page
+ * would render with no tab strip and nothing anywhere pointing at it.
+ *
+ * Core numbers itself in hundreds, the same convention the shell's sidebar
+ * uses, so a module can land between two core tabs without core renumbering.
  */
 
-const TABS = [
-  { to: '/account/profile', label: 'Profile' },
-  { to: '/account/security', label: 'Security' },
-  { to: '/account/preferences', label: 'Preferences' },
-] as const
+const CORE_TABS: readonly NavItem[] = [
+  { id: 'profile', to: '/account/profile', label: 'Profile', order: 100 },
+  { id: 'security', to: '/account/security', label: 'Security', order: 200 },
+  { id: 'preferences', to: '/account/preferences', label: 'Preferences', order: 300 },
+  { id: 'api-keys', to: '/account/api-keys', label: 'API keys', order: 400 },
+]
 
 function tabClass({ isActive }: { isActive: boolean }): string {
   return [
@@ -23,11 +33,13 @@ function tabClass({ isActive }: { isActive: boolean }): string {
 }
 
 export function AccountLayout(): React.JSX.Element {
+  const tabs = useVisibleNavItems(CORE_TABS, useNavItems('account'))
+
   return (
     <div className="animate-fade-in mx-auto max-w-4xl">
       <nav className="mb-6 flex flex-wrap gap-1 border-b border-border pb-3">
-        {TABS.map((tab) => (
-          <NavLink key={tab.to} to={tab.to} className={tabClass}>
+        {tabs.map((tab) => (
+          <NavLink key={tab.id} to={tab.to} className={tabClass}>
             {tab.label}
           </NavLink>
         ))}

package/src/pages/account/PersonalApiKeysPage.tsx

@@ -0,0 +1,27 @@
+import { ApiKeysPanel } from '../../components/ApiKeysPanel.tsx'
+import { PageHeader } from '../../components/PageHeader.tsx'
+
+/**
+ * Personal keys: act as the signed-in member against the public API and MCP.
+ *
+ * No role gate. `GET /v1/api-keys?kind=personal` scopes itself to the caller —
+ * every member manages their own, and an admin cannot see or revoke a
+ * colleague's; removing their membership is how you cut that off.
+ */
+
+export function PersonalApiKeysPage(): React.JSX.Element {
+  return (
+    <div className="animate-slide-in space-y-4">
+      <PageHeader
+        title="API keys"
+        description="Personal keys act as you against the public API and MCP. Workspace keys live under Admin."
+      />
+      <ApiKeysPanel
+        kind="personal"
+        namePlaceholder="Laptop Claude"
+        createTitle="Create personal API key"
+        emptyMessage="No personal API keys yet."
+      />
+    </div>
+  )
+}

package/src/pages/account/PreferencesPage.tsx

@@ -133,7 +133,7 @@ function PreferencesForm({
         <div className="max-w-md">
           <Field
             label="Timezone"
-            hint="Stored on your account. Kelpie does not format dates by it yet."
+            hint="Stored on your account. Dates across Kelpie use this zone."
           >
             <EntitySearch
               options={zones.map((zone) => ({ id: zone, label: zone }))}

package/src/pages/account/SecurityPage.tsx

@@ -7,6 +7,7 @@ import {
   useAccountSessions,
   useChangePassword,
   useRevokeAccountSession,
+  useTimezone,
 } from '../../api/resources/account.ts'
 import { PageHeader } from '../../components/PageHeader.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
@@ -208,6 +209,8 @@ function SessionRow({
   readonly onRevoke: () => void
   readonly isRevoking: boolean
 }): React.JSX.Element {
+  const timezone = useTimezone()
+
   return (
     <tr className="border-b border-border last:border-0">
       <td className="px-4 py-3">
@@ -219,7 +222,7 @@ function SessionRow({
           is on the wire and a session says where it is from once something can
           tell. */}
       <td className="px-4 py-3 text-ink-muted">{session.location ?? 'Unknown'}</td>
-      <td className="px-4 py-3 text-ink-muted">{formatDateTime(session.lastActiveAt)}</td>
+      <td className="px-4 py-3 text-ink-muted">{formatDateTime(session.lastActiveAt, timezone)}</td>
       <td className="px-4 py-3 text-right">
         {!session.current && (
           <button

package/src/pages/admin/ApiKeysPage.tsx

@@ -0,0 +1,43 @@
+import { useSession } from '../../api/resources/session.ts'
+import { ApiKeysPanel } from '../../components/ApiKeysPanel.tsx'
+import { PageHeader } from '../../components/PageHeader.tsx'
+
+/**
+ * Workspace keys, for shared agents and CI.
+ *
+ * `GET /v1/api-keys?kind=workspace` needs the admin role; the server answers
+ * `403` to anyone else. This page shows that plainly instead of rendering an
+ * empty table, the same shape `WebhooksPage` uses for the same reason.
+ */
+
+export function ApiKeysPage(): React.JSX.Element {
+  const { session } = useSession()
+  const isAdmin = session?.role === 'owner' || session?.role === 'admin'
+
+  return (
+    <div className="animate-slide-in mx-auto max-w-4xl space-y-4">
+      <PageHeader
+        title="API keys"
+        description="Workspace keys for shared agents and CI. Personal keys live under Account → API keys."
+      />
+      {isAdmin ? (
+        <ApiKeysPanel
+          kind="workspace"
+          namePlaceholder="CI pipeline"
+          createTitle="Create API key"
+          emptyMessage="No API keys yet."
+        />
+      ) : (
+        <MemberNotice />
+      )}
+    </div>
+  )
+}
+
+function MemberNotice(): React.JSX.Element {
+  return (
+    <p className="rounded-md border border-border px-4 py-3 text-[13px] text-ink-muted">
+      Workspace keys are managed by workspace admins.
+    </p>
+  )
+}

package/src/pages/admin/McpPage.tsx

@@ -3,6 +3,7 @@ import type { AgentRun, McpTool } from '@kelpie/schemas'
 import { useMemo, useState } from 'react'
 import { Link } from 'react-router'
 
+import { useTimezone } from '../../api/resources/account.ts'
 import {
   useAgentRuns,
   useAgents,
@@ -107,8 +108,8 @@ export function McpPage(): React.JSX.Element {
         </div>
         <p className="mt-1 text-[12px] text-ink-muted">
           Paste into your MCP client config, and replace the bearer token with a workspace key from{' '}
-          <Link to="/admin/workspace" className="text-accent hover:underline">
-            workspace settings
+          <Link to="/admin/api-keys" className="text-accent hover:underline">
+            API keys
           </Link>
           .
         </p>
@@ -133,6 +134,7 @@ function RegisteredAgents(): React.JSX.Element {
   const { records, isLoading, error } = useAgents()
   const createAgent = useCreateAgent()
   const deleteAgent = useDeleteAgent()
+  const timezone = useTimezone()
   const [adding, setAdding] = useState(false)
   const [name, setName] = useState('')
   const [endpoint, setEndpoint] = useState('')
@@ -253,7 +255,7 @@ function RegisteredAgents(): React.JSX.Element {
                 <span>
                   {agent.lastRunAt === null
                     ? 'Never run'
-                    : `Last run ${formatRelativeTime(agent.lastRunAt)}`}
+                    : `Last run ${formatRelativeTime(agent.lastRunAt, timezone)}`}
                 </span>
                 <button
                   type="button"
@@ -283,6 +285,7 @@ function RecentRuns(): React.JSX.Element {
   const { records: runs, isLoading, error } = useAgentRuns()
   const catalog = useAllAgentTasks()
   const agents = useAgents()
+  const timezone = useTimezone()
 
   const taskLabels = useMemo(
     () => new Map(catalog.records.map((task) => [task.id, task.label])),
@@ -333,7 +336,7 @@ function RecentRuns(): React.JSX.Element {
                 <span className={run.status === 'failed' ? 'font-medium text-danger' : 'text-ink-muted'}>
                   {AGENT_RUN_STATUS_LABELS[run.status]}
                 </span>
-                <span className="text-ink-faint">{formatRelativeTime(run.updatedAt)}</span>
+                <span className="text-ink-faint">{formatRelativeTime(run.updatedAt, timezone)}</span>
               </div>
             </li>
           ))}

package/src/pages/admin/WebhookDeliveries.tsx

@@ -1,6 +1,7 @@
 import type { WebhookDelivery, WebhookDeliveryStatus } from '@kelpie/schemas'
 import { useState } from 'react'
 
+import { useTimezone } from '../../api/resources/account.ts'
 import { useWebhookDeliveries } from '../../api/resources/webhooks.ts'
 import { Chip } from '../../components/Chip.tsx'
 import type { ChipTone } from '../../components/Chip.tsx'
@@ -37,6 +38,7 @@ const STATUS_TONES: Readonly<Record<WebhookDeliveryStatus, ChipTone>> = {
 export function WebhookDeliveries({ webhookId }: { readonly webhookId: string }): React.JSX.Element {
   const [status, setStatus] = useState<StatusFilter>('all')
   const [openPayloadId, setOpenPayloadId] = useState<string | null>(null)
+  const timezone = useTimezone()
   const deliveries = useWebhookDeliveries(webhookId, {
     status: status === 'all' ? undefined : status,
   })
@@ -68,7 +70,7 @@ export function WebhookDeliveries({ webhookId }: { readonly webhookId: string })
       className: 'w-32',
       render: (delivery) => (
         <span className="font-mono text-[12px] text-ink-muted">
-          {formatDateTime(delivery.createdAt)}
+          {formatDateTime(delivery.createdAt, timezone)}
         </span>
       ),
     },
@@ -80,7 +82,7 @@ export function WebhookDeliveries({ webhookId }: { readonly webhookId: string })
       // reader is looking for. An em dash says "never" without claiming a time.
       render: (delivery) => (
         <span className="font-mono text-[12px] text-ink-muted">
-          {delivery.deliveredAt === null ? '—' : formatDateTime(delivery.deliveredAt)}
+          {delivery.deliveredAt === null ? '—' : formatDateTime(delivery.deliveredAt, timezone)}
         </span>
       ),
     },

package/src/pages/admin/WebhooksPage.tsx

@@ -7,6 +7,7 @@ import type { CreatedWebhook, Webhook, WebhookEvent, WebhookStatus } from '@kelp
 import { useState } from 'react'
 import type { FormEvent } from 'react'
 
+import { useTimezone } from '../../api/resources/account.ts'
 import { useSession } from '../../api/resources/session.ts'
 import {
   useCreateWebhook,
@@ -250,6 +251,7 @@ function WebhookRow({
   const updateWebhook = useUpdateWebhook()
   const deleteWebhook = useDeleteWebhook()
   const rotateSecret = useRotateWebhookSecret()
+  const timezone = useTimezone()
   const [isConfirmingRemoval, setIsConfirmingRemoval] = useState(false)
   const [isShowingDeliveries, setIsShowingDeliveries] = useState(false)
   const [isRotating, setIsRotating] = useState(false)
@@ -319,7 +321,7 @@ function WebhookRow({
 
       <div className="mt-3 flex flex-wrap items-center gap-4 text-[11px] text-ink-faint">
         <span className="font-mono">Secret {webhook.secretPrefix}</span>
-        <span>Last delivery: {describeLastDelivery(webhook)}</span>
+        <span>Last delivery: {describeLastDelivery(webhook, timezone)}</span>
         <button
           type="button"
           aria-expanded={isShowingDeliveries}
@@ -434,10 +436,10 @@ function RotatePanel({
 }
 
 /** Both fields are null together until the first delivery settles. */
-function describeLastDelivery(webhook: Webhook): string {
+function describeLastDelivery(webhook: Webhook, timezone: string): string {
   if (webhook.lastDeliveryAt === null || webhook.lastDeliveryStatus === null) {
     return 'Never'
   }
 
-  return `${formatDateTime(webhook.lastDeliveryAt)} (${webhook.lastDeliveryStatus})`
+  return `${formatDateTime(webhook.lastDeliveryAt, timezone)} (${webhook.lastDeliveryStatus})`
 }

package/src/pages/dashboard/DashboardPage.tsx

@@ -1,5 +1,6 @@
 import type { Dashboard } from '@kelpie/schemas'
 
+import { useTimezone } from '../../api/resources/account.ts'
 import { useDashboard } from '../../api/resources/dashboard.ts'
 import { useMembers } from '../../api/resources/members.ts'
 import { useWorkspace } from '../../api/resources/workspace.ts'
@@ -20,7 +21,7 @@ import { ActivityFeed, AttentionList, DecisionsList, NotesList } from './section
 
 /** The heading date, written in the workspace's own day rather than the browser's. */
 function briefHeading(dashboard: Dashboard): string {
-  return new Intl.DateTimeFormat('en-AU', {
+  return new Intl.DateTimeFormat(undefined, {
     weekday: 'long',
     month: 'short',
     day: 'numeric',
@@ -32,6 +33,7 @@ export function DashboardPage(): React.JSX.Element {
   const { dashboard, isLoading, error } = useDashboard()
   const { workspace } = useWorkspace()
   const { nameById } = useMembers()
+  const timezone = useTimezone()
 
   return (
     <div className="animate-fade-in">
@@ -46,6 +48,7 @@ export function DashboardPage(): React.JSX.Element {
           workspaceId={workspace?.id}
           workspaceName={workspace?.name ?? 'This workspace'}
           nameById={nameById}
+          timezone={timezone}
         />
       )}
     </div>
@@ -57,11 +60,13 @@ function DashboardBody({
   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 {
   // `generatedAt` rather than a fresh `new Date()`: every relative time on the
   // page is then measured from the same instant the counts were, so a tab left
@@ -97,11 +102,16 @@ function DashboardBody({
 
       <div className="mb-8 grid gap-8 lg:grid-cols-2">
         <AttentionList rows={attentionRows(dashboard)} />
-        <ActivityFeed activities={dashboard.recentActivity} nameById={nameById} now={now} />
+        <ActivityFeed
+          activities={dashboard.recentActivity}
+          nameById={nameById}
+          now={now}
+          timezone={timezone}
+        />
       </div>
       <div className="grid gap-8 lg:grid-cols-2">
-        <NotesList notes={dashboard.recentNotes} nameById={nameById} now={now} />
-        <DecisionsList decisions={dashboard.recentDecisions} nameById={nameById} />
+        <NotesList notes={dashboard.recentNotes} nameById={nameById} now={now} timezone={timezone} />
+        <DecisionsList decisions={dashboard.recentDecisions} nameById={nameById} timezone={timezone} />
       </div>
     </div>
   )

package/src/pages/dashboard/sections.tsx

@@ -106,10 +106,12 @@ export function ActivityFeed({
   activities,
   nameById,
   now,
+  timezone,
 }: {
   readonly activities: readonly DashboardActivity[]
   readonly nameById: ReadonlyMap<string, string>
   readonly now: Date
+  readonly timezone: string
 }): React.JSX.Element {
   return (
     <section>
@@ -145,7 +147,7 @@ export function ActivityFeed({
                     dateTime={activity.createdAt.toISOString()}
                     className="shrink-0 text-[11px] text-ink-faint"
                   >
-                    {formatRelativeTime(activity.createdAt, now)}
+                    {formatRelativeTime(activity.createdAt, timezone, now)}
                   </time>
                 </div>
                 <p className="text-[11px] leading-snug text-ink-faint">
@@ -184,10 +186,12 @@ export function NotesList({
   notes,
   nameById,
   now,
+  timezone,
 }: {
   readonly notes: readonly DashboardNote[]
   readonly nameById: ReadonlyMap<string, string>
   readonly now: Date
+  readonly timezone: string
 }): React.JSX.Element {
   return (
     <section>
@@ -211,7 +215,7 @@ export function NotesList({
                 <span>·</span>
                 <span>{note.authorId === null ? 'System' : (nameById.get(note.authorId) ?? 'Unknown')}</span>
                 <span>·</span>
-                <span>{formatRelativeTime(note.createdAt, now)}</span>
+                <span>{formatRelativeTime(note.createdAt, timezone, now)}</span>
               </div>
             </li>
           ))}
@@ -224,9 +228,11 @@ export function NotesList({
 export function DecisionsList({
   decisions,
   nameById,
+  timezone,
 }: {
   readonly decisions: readonly DashboardDecision[]
   readonly nameById: ReadonlyMap<string, string>
+  readonly timezone: string
 }): React.JSX.Element {
   return (
     <section>
@@ -254,7 +260,7 @@ export function DecisionsList({
               <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-ink-faint">
                 <TargetLink target={decision} />
                 <span>·</span>
-                <span>{formatDate(decision.decidedAt)}</span>
+                <span>{formatDate(decision.decidedAt, timezone)}</span>
                 <span>·</span>
                 <span>
                   {decision.ownerId === null ? '—' : (nameById.get(decision.ownerId) ?? 'Unknown')}

package/src/pages/forms/SubmissionsTable.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import { Link } from 'react-router'
 
 import type { RecordListResult } from '../../api/resource.ts'
+import { useTimezone } from '../../api/resources/account.ts'
 import { useCompanies } from '../../api/resources/companies.ts'
 import { usePeople } from '../../api/resources/people.ts'
 import { DataTable } from '../../components/DataTable.tsx'
@@ -31,6 +32,7 @@ export interface SubmissionsTableProps {
 export function SubmissionsTable({ form, submissions }: SubmissionsTableProps): React.JSX.Element {
   const people = usePeople({ limit: MAX_PAGE })
   const companies = useCompanies({ limit: MAX_PAGE })
+  const timezone = useTimezone()
 
   const nameById = useMemo(
     () => new Map([...people.records, ...companies.records].map((record) => [record.id, record.name])),
@@ -44,7 +46,7 @@ export function SubmissionsTable({ form, submissions }: SubmissionsTableProps):
       className: 'w-40',
       render: (submission) => (
         <span className="font-mono text-[12px] text-ink-muted">
-          {formatDateTime(submission.submittedAt)}
+          {formatDateTime(submission.submittedAt, timezone)}
         </span>
       ),
     },

package/src/pages/handbook/HandbookPage.tsx

@@ -13,6 +13,7 @@ import type { HandbookPage } from '@kelpie/schemas'
 import { useEffect, useMemo, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router'
 
+import { useTimezone } from '../../api/resources/account.ts'
 import {
   useCreateHandbookPage,
   useDeleteHandbookPage,
@@ -384,6 +385,7 @@ function HandbookEditor({
   const [editing, setEditing] = useState(false)
   const [title, setTitle] = useState(page.title)
   const [body, setBody] = useState(page.body)
+  const timezone = useTimezone()
 
   useEffect(() => {
     setTitle(page.title)
@@ -415,7 +417,7 @@ function HandbookEditor({
             <h1 className="text-[18px] font-semibold tracking-tight text-ink">{page.title}</h1>
           )}
           <div className="mt-1 text-[11px] text-ink-faint">
-            Updated {formatDateTime(page.updatedAt)}
+            Updated {formatDateTime(page.updatedAt, timezone)}
             {authorName === undefined ? '' : ` · ${authorName}`}
           </div>
         </div>

package/src/registry/context.ts

@@ -4,7 +4,6 @@ import type { ComponentType } from 'react'
 import type {
   DashboardCard,
   ExtensibleRecordType,
-  IntegrationProvider,
   NavItem,
   NavSlot,
   RecordSidebarCard,
@@ -54,10 +53,6 @@ export function useDashboardCards(): readonly DashboardCard[] {
   return useUiExtensions().dashboardCards()
 }
 
-export function useIntegrationProviders(): readonly IntegrationProvider[] {
-  return useUiExtensions().integrationProviders()
-}
-
 /**
  * The component to render for an overridable: a module's replacement, or core's
  * own. Core calls this instead of rendering its component directly.

package/src/registry/contributions.ts

@@ -1,5 +1,5 @@
 import type { ExtensibleRecordType } from '@kelpie/schemas'
-import type { ComponentType, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 /**
  * What a UI module may add to the shell, per the slot table in `modules.md`.
@@ -68,22 +68,3 @@ export interface DashboardCard {
   readonly render: () => ReactNode
 }
 
-export const INTEGRATION_CATEGORIES = [
-  'messaging',
-  'identity',
-  'enrichment',
-  'email',
-  'calendar',
-] as const
-
-export type IntegrationCategory = (typeof INTEGRATION_CATEGORIES)[number]
-
-/** A catalog entry on the admin integrations page. Core owns the page and the connection lifecycle. */
-export interface IntegrationProvider {
-  readonly id: string
-  readonly name: string
-  readonly category: IntegrationCategory
-  readonly description: string
-  /** Rendered on the provider's own settings panel once connected. */
-  readonly settings?: ComponentType<Record<string, never>>
-}

package/src/registry/registry.ts

@@ -3,7 +3,6 @@ import type { ComponentType } from 'react'
 import type {
   DashboardCard,
   ExtensibleRecordType,
-  IntegrationProvider,
   NavItem,
   NavSlot,
   RecordSidebarCard,
@@ -32,7 +31,6 @@ export interface UiModuleContext {
   recordTab(objectType: ExtensibleRecordType, tab: RecordTab): void
   recordSidebarCard(objectType: ExtensibleRecordType, card: RecordSidebarCard): void
   dashboardCard(card: DashboardCard): void
-  integrationProvider(provider: IntegrationProvider): void
   /** Replaces a core component. Prefer a slot; see `modules.md`. */
   override<Props>(token: Overridable<Props>, component: ComponentType<Props>): void
 }
@@ -49,7 +47,6 @@ export interface UiExtensions {
   recordTabs(objectType: ExtensibleRecordType): readonly RecordTab[]
   recordSidebarCards(objectType: ExtensibleRecordType): readonly RecordSidebarCard[]
   dashboardCards(): readonly DashboardCard[]
-  integrationProviders(): readonly IntegrationProvider[]
   componentFor<Props>(token: Overridable<Props>): ComponentType<Props>
 }
 
@@ -73,7 +70,6 @@ interface Accumulator {
   readonly recordTabs: Map<ExtensibleRecordType, RecordTab[]>
   readonly recordSidebarCards: Map<ExtensibleRecordType, RecordSidebarCard[]>
   readonly dashboardCards: DashboardCard[]
-  readonly integrationProviders: IntegrationProvider[]
   readonly overrides: OverrideStore
 }
 
@@ -138,11 +134,6 @@ function createModuleContext(
       accumulator.dashboardCards.push(card)
     },
 
-    integrationProvider(provider) {
-      claim(taken, module.id, 'admin.integrations.catalog', provider.id)
-      accumulator.integrationProviders.push(provider)
-    },
-
     override(token, component) {
       if (accumulator.overrides.has(token.key)) {
         throw new UiModuleError(
@@ -167,7 +158,6 @@ export function registerUiModules(modules: readonly UiModule[]): UiExtensions {
     recordTabs: new Map(),
     recordSidebarCards: new Map(),
     dashboardCards: [],
-    integrationProviders: [],
     overrides: createOverrideStore(),
   }
   const taken = new Set<string>()
@@ -189,7 +179,6 @@ export function registerUiModules(modules: readonly UiModule[]): UiExtensions {
     recordSidebarCards: (objectType) =>
       inSlotOrder(accumulator.recordSidebarCards.get(objectType) ?? []),
     dashboardCards: () => inSlotOrder(accumulator.dashboardCards),
-    integrationProviders: () => accumulator.integrationProviders,
     componentFor: (token) => accumulator.overrides.get(token),
   }
 }

package/src/registry/visibleNav.ts

@@ -0,0 +1,38 @@
+import { useModuleSettings } from '../api/resources/moduleSettings.ts'
+import type { NavItem } from './contributions.ts'
+import { inSlotOrder } from './registry.ts'
+
+/**
+ * Core's nav items merged with a slot's module contributions, ordered, with the
+ * entries belonging to a disabled module removed.
+ *
+ * One hook rather than the rule written out at each nav surface. The shell's
+ * sidebar and the account tab strip both render a slot, and a workspace that
+ * switched a module off should stop seeing it in both. Two copies of this
+ * filter is exactly the sort of pair that drifts, and the symptom is a tab that
+ * survives its module being disabled and leads to a page answering 403.
+ */
+
+/**
+ * A nav item whose id does not match its module id. Everything else looks itself
+ * up directly, which is what keeps a toggleable module's own nav entry working
+ * with no change here when one is added later.
+ */
+const NAV_ID_TO_MODULE_ID: Readonly<Record<string, string>> = {
+  fundraising: 'raises',
+  data: 'import-export',
+}
+
+export function useVisibleNavItems(
+  coreItems: readonly NavItem[],
+  moduleItems: readonly NavItem[],
+): readonly NavItem[] {
+  const { settings } = useModuleSettings()
+  const disabledModuleIds = new Set(
+    settings.filter((setting) => !setting.enabled).map((setting) => setting.moduleId),
+  )
+
+  return inSlotOrder([...coreItems, ...moduleItems]).filter(
+    (item) => !disabledModuleIds.has(NAV_ID_TO_MODULE_ID[item.id] ?? item.id),
+  )
+}