@kelpie/ui 0.3.1 → 0.4.1

package/src/components/ActivitiesPanel.tsx

@@ -1,5 +1,6 @@
 import type { Activity, ActivityKind, RecordTargetType } from '@kelpie/schemas'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useActivities } from '../api/resources/activities.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { formatRelativeTime, monthLabel } from '../lib/dates.ts'
@@ -55,11 +56,15 @@ interface MonthGroup {
 }
 
 /** Consecutive runs, not a map: the list is already ordered, so a month never recurs. */
-function groupByMonth(activities: readonly Activity[], now: Date): readonly MonthGroup[] {
+function groupByMonth(
+  activities: readonly Activity[],
+  timezone: string,
+  now: Date,
+): readonly MonthGroup[] {
   const groups: { label: string; items: Activity[] }[] = []
 
   for (const activity of activities) {
-    const label = monthLabel(activity.createdAt, now)
+    const label = monthLabel(activity.createdAt, timezone, now)
     const last = groups.at(-1)
 
     if (last?.label === label) {
@@ -78,7 +83,8 @@ export function ActivitiesPanel({
 }: ActivitiesPanelProps): React.JSX.Element {
   const activities = useActivities({ targetType, targetId })
   const members = useMembers()
-  const groups = groupByMonth(activities.records, new Date())
+  const timezone = useTimezone()
+  const groups = groupByMonth(activities.records, timezone, new Date())
 
   return (
     <section>
@@ -104,6 +110,7 @@ export function ActivitiesPanel({
                   contextType={targetType}
                   contextId={targetId}
                   isLast={index === group.items.length - 1}
+                  timezone={timezone}
                 />
               ))}
             </ol>
@@ -137,6 +144,7 @@ export function LatestActivity({
 }: ActivitiesPanelProps): React.JSX.Element {
   const activities = useActivities({ targetType, targetId })
   const members = useMembers()
+  const timezone = useTimezone()
   const latest = activities.records[0]
 
   return (
@@ -158,6 +166,7 @@ export function LatestActivity({
             contextType={targetType}
             contextId={targetId}
             isLast
+            timezone={timezone}
           />
         </ol>
       )}
@@ -183,12 +192,14 @@ function ActivityEvent({
   contextType,
   contextId,
   isLast,
+  timezone,
 }: {
   readonly activity: Activity
   readonly actorName: string
   readonly contextType: RecordTargetType
   readonly contextId: string
   readonly isLast: boolean
+  readonly timezone: string
 }): React.JSX.Element {
   const isRolledUp = activity.targetType !== contextType || activity.targetId !== contextId
 
@@ -218,7 +229,7 @@ function ActivityEvent({
             dateTime={activity.createdAt.toISOString()}
             className="shrink-0 text-[11px] text-ink-faint"
           >
-            {formatRelativeTime(activity.createdAt)}
+            {formatRelativeTime(activity.createdAt, timezone)}
           </time>
         </div>
         {isRolledUp && (

package/src/components/ApiKeysPanel.tsx

@@ -0,0 +1,307 @@
+import type { ApiKey, ApiKeyKind, CreatedApiKey } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+
+import { useTimezone } from '../api/resources/account.ts'
+import { useApiKeys, useCreateApiKey, useRevokeApiKey } from '../api/resources/apiKeys.ts'
+import { formatDate } from '../lib/dates.ts'
+import { CopyButton } from './CopyButton.tsx'
+import { ErrorPanel, LoadingPanel } from './QueryState.tsx'
+
+/**
+ * The create/list/revoke flow shared by workspace keys (`/admin/api-keys`) and
+ * personal keys (`/account/api-keys`).
+ *
+ * `kind` and the three strings below are the only difference between the two
+ * pages, the same way `KanbanBoard` takes a `kind` for Deals versus
+ * Opportunities. Who may reach this component at all — the admin gate on the
+ * workspace page, none on the personal page — is the caller's decision; the API
+ * enforces its own half regardless.
+ */
+
+export interface ApiKeysPanelProps {
+  readonly kind: ApiKeyKind
+  /** Shown in the create form's name field, e.g. "CI pipeline" or "Laptop Claude". */
+  readonly namePlaceholder: string
+  readonly createTitle: string
+  readonly emptyMessage: string
+}
+
+export function ApiKeysPanel({
+  kind,
+  namePlaceholder,
+  createTitle,
+  emptyMessage,
+}: ApiKeysPanelProps): React.JSX.Element {
+  const { records, isLoading, error } = useApiKeys(kind)
+  const revokeApiKey = useRevokeApiKey()
+  const [showModal, setShowModal] = useState(false)
+  const [minted, setMinted] = useState<CreatedApiKey | null>(null)
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        <button
+          type="button"
+          onClick={() => {
+            setShowModal(true)
+          }}
+          className="shrink-0 rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover"
+        >
+          Create key
+        </button>
+      </div>
+
+      {minted !== null && (
+        <SecretOnce
+          apiKey={minted}
+          onDismiss={() => {
+            setMinted(null)
+          }}
+        />
+      )}
+
+      {error !== null && <ErrorPanel error={error} />}
+
+      {isLoading ? (
+        <LoadingPanel label="Loading API keys…" />
+      ) : (
+        <ApiKeyTable
+          keys={records}
+          emptyMessage={emptyMessage}
+          onRevoke={(id) => {
+            revokeApiKey.run(id)
+          }}
+          isRevoking={revokeApiKey.isPending}
+        />
+      )}
+
+      {revokeApiKey.error !== null && <ErrorPanel error={revokeApiKey.error} />}
+
+      {showModal && (
+        <CreateKeyModal
+          kind={kind}
+          title={createTitle}
+          namePlaceholder={namePlaceholder}
+          onCreated={(key) => {
+            setShowModal(false)
+            setMinted(key)
+          }}
+          onCancel={() => {
+            setShowModal(false)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+function CreateKeyModal({
+  kind,
+  title,
+  namePlaceholder,
+  onCreated,
+  onCancel,
+}: {
+  readonly kind: ApiKeyKind
+  readonly title: string
+  readonly namePlaceholder: string
+  readonly onCreated: (key: CreatedApiKey) => void
+  readonly onCancel: () => void
+}): React.JSX.Element {
+  const createApiKey = useCreateApiKey()
+  const [name, setName] = useState('')
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+    createApiKey
+      .runAsync({ name: name.trim(), kind })
+      .then(onCreated)
+      .catch(() => undefined)
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4">
+      <div className="animate-slide-in w-full max-w-md rounded-md border border-border bg-surface-raised p-5">
+        <form onSubmit={submit}>
+          <h2 className="text-[15px] font-semibold text-ink">{title}</h2>
+          <label className="mt-4 block">
+            <span className="mb-1.5 block text-[12px] font-medium">Name</span>
+            <input
+              value={name}
+              onChange={(event) => {
+                setName(event.target.value)
+              }}
+              placeholder={namePlaceholder}
+              required
+              autoFocus
+              className="w-full rounded-md border border-border bg-surface px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+            />
+          </label>
+
+          {createApiKey.error !== null && (
+            <div className="mt-3">
+              <ErrorPanel error={createApiKey.error} />
+            </div>
+          )}
+
+          <div className="mt-4 flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="rounded-md px-3 py-2 text-[12px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={createApiKey.isPending}
+              className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-50"
+            >
+              {createApiKey.isPending ? 'Creating…' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * The secret, shown once.
+ *
+ * Nothing can retrieve it afterwards, so this panel says so plainly instead of
+ * leaving a reader to discover it by coming back for the value later.
+ */
+function SecretOnce({
+  apiKey,
+  onDismiss,
+}: {
+  readonly apiKey: CreatedApiKey
+  readonly onDismiss: () => void
+}): React.JSX.Element {
+  return (
+    <div className="rounded-md border border-accent/40 bg-accent-soft px-4 py-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[13px] font-medium text-ink">Copy this key now. It is not shown again.</p>
+          <code className="mt-2 block break-all rounded border border-border bg-surface px-3 py-2 font-mono text-[12px] text-ink">
+            {apiKey.secret}
+          </code>
+        </div>
+        <CopyButton value={apiKey.secret} label="Copy the API key" />
+      </div>
+      <button
+        type="button"
+        onClick={onDismiss}
+        className="mt-2 text-[12px] font-medium text-accent hover:underline"
+      >
+        I have copied it
+      </button>
+    </div>
+  )
+}
+
+function ApiKeyTable({
+  keys,
+  emptyMessage,
+  onRevoke,
+  isRevoking,
+}: {
+  readonly keys: readonly ApiKey[]
+  readonly emptyMessage: string
+  readonly onRevoke: (id: string) => void
+  readonly isRevoking: boolean
+}): React.JSX.Element {
+  if (keys.length === 0) {
+    return (
+      <p className="rounded-md border border-border px-4 py-10 text-center text-[13px] text-ink-faint">
+        {emptyMessage}
+      </p>
+    )
+  }
+
+  return (
+    <div className="overflow-hidden rounded-md border border-border">
+      <table className="w-full text-left text-[13px]">
+        <thead>
+          <tr className="border-b border-border bg-surface text-[11px] font-semibold tracking-wide text-ink-muted uppercase">
+            <th className="px-4 py-2.5">Name</th>
+            <th className="px-4 py-2.5">Prefix</th>
+            <th className="px-4 py-2.5">Created</th>
+            <th className="px-4 py-2.5">Last used</th>
+            <th className="px-4 py-2.5 text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {keys.map((key) => (
+            <ApiKeyRow key={key.id} apiKey={key} onRevoke={onRevoke} isRevoking={isRevoking} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+/**
+ * Revoking a key takes effect at once and cannot be undone, so this asks first,
+ * the same two-step confirm `WebhooksPage` uses for removing a registration.
+ */
+function ApiKeyRow({
+  apiKey,
+  onRevoke,
+  isRevoking,
+}: {
+  readonly apiKey: ApiKey
+  readonly onRevoke: (id: string) => void
+  readonly isRevoking: boolean
+}): React.JSX.Element {
+  const [isConfirming, setIsConfirming] = useState(false)
+  const timezone = useTimezone()
+
+  return (
+    <tr className="border-b border-border last:border-0">
+      <td className="px-4 py-3 font-medium">{apiKey.name}</td>
+      <td className="px-4 py-3 font-mono text-[12px] text-ink-muted">{apiKey.displayPrefix}</td>
+      <td className="px-4 py-3 text-ink-muted">{formatDate(apiKey.createdAt, timezone)}</td>
+      <td className="px-4 py-3 text-ink-muted">
+        {apiKey.lastUsedAt === null ? 'Never' : formatDate(apiKey.lastUsedAt, timezone)}
+      </td>
+      <td className="px-4 py-3 text-right">
+        {isConfirming ? (
+          <span className="inline-flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => {
+                setIsConfirming(false)
+              }}
+              className="text-[12px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              disabled={isRevoking}
+              onClick={() => {
+                onRevoke(apiKey.id)
+              }}
+              className="text-[12px] font-medium text-danger hover:underline disabled:opacity-50"
+            >
+              {isRevoking ? 'Revoking…' : 'Revoke'}
+            </button>
+          </span>
+        ) : (
+          <button
+            type="button"
+            onClick={() => {
+              setIsConfirming(true)
+            }}
+            className="text-[12px] font-medium text-danger hover:underline"
+          >
+            Revoke
+          </button>
+        )}
+      </td>
+    </tr>
+  )
+}

package/src/components/DecisionsPanel.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import type { FormEvent } from 'react'
 import { Link } from 'react-router'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useCreateDecision, useDecisions, useDeleteDecision } from '../api/resources/decisions.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { formatDate } from '../lib/dates.ts'
@@ -208,6 +209,8 @@ function DecisionItem({
   readonly ownerName: string | undefined
   readonly onRemove: () => void
 }): React.JSX.Element {
+  const timezone = useTimezone()
+
   return (
     <li className="border-b border-border px-4 py-3 last:border-0">
       <div className="flex items-start justify-between gap-2">
@@ -224,8 +227,8 @@ function DecisionItem({
         <p className="mt-1 text-[12px] text-ink-muted">{decision.rationale}</p>
       )}
       <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-ink-faint">
-        <span>Decided {formatDate(decision.decidedAt)}</span>
-        {decision.dueAt !== null && <span>By {formatDate(decision.dueAt)}</span>}
+        <span>Decided {formatDate(decision.decidedAt, timezone)}</span>
+        {decision.dueAt !== null && <span>By {formatDate(decision.dueAt, timezone)}</span>}
         {ownerName !== undefined && <span>{ownerName}</span>}
       </div>
     </li>

package/src/components/NotesPanel.tsx

@@ -2,6 +2,7 @@ import type { Note, RecordTargetType } from '@kelpie/schemas'
 import { useState } from 'react'
 import type { FormEvent } from 'react'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { useCreateNote, useNotes } from '../api/resources/notes.ts'
 import { formatDateTime } from '../lib/dates.ts'
@@ -149,6 +150,8 @@ function NoteItem({
   readonly note: Note
   readonly authorName: string
 }): React.JSX.Element {
+  const timezone = useTimezone()
+
   return (
     <li className="rounded-md border border-border bg-surface-raised px-3.5 py-3">
       <div className="flex items-start justify-between gap-2">
@@ -162,7 +165,7 @@ function NoteItem({
       <div className="mt-2 flex items-center gap-2 text-[11px] text-ink-faint">
         <span>{authorName}</span>
         <span>·</span>
-        <span>{formatDateTime(note.createdAt)}</span>
+        <span>{formatDateTime(note.createdAt, timezone)}</span>
       </div>
     </li>
   )

package/src/components/Shell.tsx

@@ -2,13 +2,12 @@ import { useEffect, useRef, useState } from 'react'
 import { NavLink, Outlet, useLocation, useNavigate } from 'react-router'
 
 import { useAccount, useTheme } from '../api/resources/account.ts'
-import { useModuleSettings } from '../api/resources/moduleSettings.ts'
 import { useLogOut } from '../api/resources/session.ts'
 import { initialsOf } from '../lib/names.ts'
 import type { ThemePreference } from '../lib/theme.ts'
 import { useNavItems } from '../registry/context.ts'
 import type { NavItem } from '../registry/contributions.ts'
-import { inSlotOrder } from '../registry/registry.ts'
+import { useVisibleNavItems } from '../registry/visibleNav.ts'
 import { ErrorBoundary } from './ErrorBoundary.tsx'
 
 /**
@@ -24,6 +23,7 @@ const CORE_ADMIN_NAV: readonly NavItem[] = [
   { id: 'workspace', label: 'Workspace', to: '/admin/workspace', order: 100 },
   { id: 'team', label: 'Team', to: '/admin/team', order: 200 },
   { id: 'data', label: 'Data', to: '/admin/data', order: 300 },
+  { id: 'api-keys', label: 'API keys', to: '/admin/api-keys', order: 350 },
   { id: 'webhooks', label: 'Webhooks', to: '/admin/webhooks', order: 400 },
   { id: 'mcp', label: 'MCP', to: '/admin/mcp', order: 500 },
   { id: 'modules', label: 'Modules', to: '/admin/modules', order: 600 },
@@ -51,16 +51,6 @@ const CORE_NAV: readonly NavItem[] = [
  */
 const TOP_LEVEL_NAV_IDS: ReadonlySet<string> = new Set(['dashboard', 'handbook', 'planning', 'decisions'])
 
-/**
- * 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',
-}
-
 function linkClass({ isActive }: { isActive: boolean }): string {
   return [
     'block rounded-md px-2 py-1 text-[13px] transition-colors duration-100',
@@ -89,12 +79,6 @@ export function Shell(): React.JSX.Element {
   const logOut = useLogOut()
   const moduleNav = useNavItems('primary')
   const moduleAdminNav = useNavItems('admin')
-  const { settings } = useModuleSettings()
-  const disabledModuleIds = new Set(
-    settings.filter((setting) => !setting.enabled).map((setting) => setting.moduleId),
-  )
-  const isModuleHidden = (navId: string): boolean =>
-    disabledModuleIds.has(NAV_ID_TO_MODULE_ID[navId] ?? navId)
   const [menuOpen, setMenuOpen] = useState(false)
   // The same preference the account page writes, so this button and that page
   // cannot disagree about which theme the account is on.
@@ -128,12 +112,10 @@ export function Shell(): React.JSX.Element {
     }
   }, [menuOpen])
 
-  const navItems = inSlotOrder([...CORE_NAV, ...moduleNav]).filter((item) => !isModuleHidden(item.id))
+  const navItems = useVisibleNavItems(CORE_NAV, moduleNav)
   const topLevelItems = navItems.filter((item) => TOP_LEVEL_NAV_IDS.has(item.id))
   const crmItems = navItems.filter((item) => !TOP_LEVEL_NAV_IDS.has(item.id))
-  const adminItems = inSlotOrder([...CORE_ADMIN_NAV, ...moduleAdminNav]).filter(
-    (item) => !isModuleHidden(item.id),
-  )
+  const adminItems = useVisibleNavItems(CORE_ADMIN_NAV, moduleAdminNav)
 
   return (
     <div className="flex min-h-screen bg-surface">

package/src/index.ts

@@ -155,12 +155,10 @@ export type { DueBucketId, PlanAttention as PlanAttentionSummary } from './lib/p
 export { applyTheme, getStoredTheme, resolveTheme, setStoredTheme, watchSystemTheme } from './lib/theme.ts'
 export type { ThemePreference } from './lib/theme.ts'
 
-export { EXTENSIBLE_RECORD_TYPES, INTEGRATION_CATEGORIES, NAV_SLOTS } from './registry/contributions.ts'
+export { EXTENSIBLE_RECORD_TYPES, NAV_SLOTS } from './registry/contributions.ts'
 export type {
   DashboardCard,
   ExtensibleRecordType,
-  IntegrationCategory,
-  IntegrationProvider,
   NavItem,
   NavSlot,
   RecordContext,
@@ -177,7 +175,6 @@ export type { UiExtensions, UiModule, UiModuleContext } from './registry/registr
 
 export {
   useDashboardCards,
-  useIntegrationProviders,
   useModuleRoutes,
   useNavItems,
   useOverridable,

package/src/lib/dates.ts

@@ -4,17 +4,32 @@
  *
  * `now` is a parameter rather than a call to `new Date()` inside, because a
  * function that reads the clock cannot be tested against a fixed expectation.
+ * `timezone` is a parameter for the same reason, and because two people in
+ * different zones should see the day change at different moments. Resolve it
+ * once with `resolveTimezone` and pass the result in.
+ *
+ * The locale is left undefined throughout, which asks `Intl` for the runtime's
+ * own — the browser's, for every real caller. Formatters are built per call
+ * rather than cached, matching `dayIn` on the server: the zone varies by
+ * caller, and a cache keyed on it would only grow.
  */
 
-const DATE_TIME = new Intl.DateTimeFormat('en-AU', {
-  day: 'numeric',
-  month: 'short',
-  hour: 'numeric',
-  minute: '2-digit',
-})
+/** The account's own choice, falling back to the workspace's, then to UTC. */
+export function resolveTimezone(
+  userTimezone: string | undefined,
+  workspaceTimezone: string | undefined,
+): string {
+  return userTimezone ?? workspaceTimezone ?? 'UTC'
+}
 
-export function formatDateTime(value: Date): string {
-  return DATE_TIME.format(value)
+export function formatDateTime(value: Date, timezone: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    day: 'numeric',
+    month: 'short',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZone: timezone,
+  }).format(value)
 }
 
 function plural(count: number, unit: string): string {
@@ -28,11 +43,11 @@ function plural(count: number, unit: string): string {
  * panel means the clocks disagree, and phrasing it as elapsed time would hide
  * that.
  */
-export function formatRelativeTime(value: Date, now: Date = new Date()): string {
+export function formatRelativeTime(value: Date, timezone: string, now: Date = new Date()): string {
   const elapsedMs = now.getTime() - value.getTime()
 
   if (elapsedMs < 0) {
-    return formatDateTime(value)
+    return formatDateTime(value, timezone)
   }
 
   const seconds = Math.round(elapsedMs / 1000)
@@ -64,27 +79,46 @@ export function formatRelativeTime(value: Date, now: Date = new Date()): string
   return months < 12 ? plural(months, 'month') : plural(Math.round(months / 12), 'year')
 }
 
-const DAY = new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' })
+const DAY = new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
 
 /**
  * A date-only field (`YYYY-MM-DD`), as the mockup writes one. Parsed at midday
  * so no timezone west or east of UTC shifts it onto a neighbouring day.
+ *
+ * Takes no `timezone`: the value is already a specific calendar day, usually
+ * one the server resolved against the workspace's own zone, not an instant to
+ * re-project into whoever is looking at it.
  */
 export function formatDay(iso: string): string {
   return DAY.format(new Date(`${iso}T12:00:00`))
 }
 
 /** A moment whose time of day does not matter to the reader, e.g. when a decision was made. */
-export function formatDate(value: Date): string {
-  return DAY.format(value)
+export function formatDate(value: Date, timezone: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    timeZone: timezone,
+  }).format(value)
 }
 
-const MONTH = new Intl.DateTimeFormat('en-AU', { month: 'long' })
-const MONTH_AND_YEAR = new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' })
+/** The year `value` falls in, within `timezone`, as digits — for comparison, not display. */
+function yearIn(value: Date, timezone: string): string {
+  return new Intl.DateTimeFormat(undefined, { year: 'numeric', timeZone: timezone }).format(value)
+}
 
-/** The heading a timeline groups under. The year is dropped for the current one. */
-export function monthLabel(value: Date, now: Date = new Date()): string {
-  return value.getFullYear() === now.getFullYear()
-    ? MONTH.format(value)
-    : MONTH_AND_YEAR.format(value)
+/**
+ * The heading a timeline groups under. The year is dropped for the current one.
+ *
+ * "Current" is judged in `timezone`, not the machine's own: a moment near a
+ * year boundary is still December in one zone while already January somewhere
+ * else, and the heading should agree with whichever zone it is rendered in.
+ */
+export function monthLabel(value: Date, timezone: string, now: Date = new Date()): string {
+  return yearIn(value, timezone) === yearIn(now, timezone)
+    ? new Intl.DateTimeFormat(undefined, { month: 'long', timeZone: timezone }).format(value)
+    : new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric', timeZone: timezone }).format(
+        value,
+      )
 }

package/src/pages/DecisionsPage.tsx

@@ -2,6 +2,7 @@ import type { Decision, RecordTargetType } from '@kelpie/schemas'
 import { useMemo, useState } from 'react'
 import { Link } from 'react-router'
 
+import { useTimezone } from '../api/resources/account.ts'
 import { useCompanies } from '../api/resources/companies.ts'
 import { useDeals } from '../api/resources/deals.ts'
 import { useDecisions } from '../api/resources/decisions.ts'
@@ -127,6 +128,7 @@ export function DecisionsPage(): React.JSX.Element {
   const decisions = useDecisions({ term: term.trim().length > 0 ? term.trim() : undefined })
   const directory = useTargetDirectory()
   const members = useMembers()
+  const timezone = useTimezone()
 
   const columns: readonly Column<Decision>[] = [
     {
@@ -149,14 +151,16 @@ export function DecisionsPage(): React.JSX.Element {
     {
       key: 'decided',
       header: 'Decided',
-      render: (decision) => <span className="text-ink-muted">{formatDate(decision.decidedAt)}</span>,
+      render: (decision) => (
+        <span className="text-ink-muted">{formatDate(decision.decidedAt, timezone)}</span>
+      ),
     },
     {
       key: 'due',
       header: 'By',
       render: (decision) => (
         <span className="text-ink-muted">
-          {decision.dueAt === null ? '—' : formatDate(decision.dueAt)}
+          {decision.dueAt === null ? '—' : formatDate(decision.dueAt, timezone)}
         </span>
       ),
     },